INTRODUCTION
THE POWER OF KNOWLEDGE
Welcome to a tutorial on how to create a simple CSS product grid. Once upon a time in the stone age of the Internet, we have to play with all sorts of same height CSS columns hack, and fight with digital dragons to get a proper grid. Thankfully today, CSS has become a lot more mature and much easier to create grids.
If you do a search on the Internet, you will find tons of product grid templates to choose from. But that is not what this guide is about. Instead of adding another “free templates download” post into the pile, this will teach you how to build one instead – Why struggle with the templates, when you know how to build one yourself? Read on!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want the CSS and skip the tutorial.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Method 1 | Method 2 | Method 3 |
Method 4 | Extra | Closing |
METHOD 1
FLOATING DIV
Let us start with one of the more traditional ways of doing product grids – By using floating divs. Although I will recommend using the more modern flexbox and grid, this one is still an old reliable that is good to know.
THE BASICS OF FLOATING DIV
Floating Div Basics
Product
Product
Product
Product
Product
Product
The magic that drives the floating method is a But please do take note that unlike tables, the “cells” in this method will not be of equal height – If one cell is taller than the other, it may cause the entire layout to break. There are 3 usual “fix” that we apply: Pretty much the same mechanics as above, but complete with demo products, bells, and whistles. This next method is a true savior to the web developers. Equal height columns and grid arrangements used to be a nightmare, and the flexbox made it so easy. The flexbox is still a The CSS grid is a cousin of the flexbox, and pretty much another piece of cake. The CSS grid layout works somewhat the same as flexbox. Tables are one of the oldest ways to create a product grid, but I will not recommend using this – As easy as this may be, it is not responsive, and I am leaving this here only as an “honorable mention”. I guess this one needs no explanation – The table grid is what it is… We are practically just displaying the products in an HTML table. That’s all for the code, and here is the download link as promised – Plus a small extra that may be useful to you. I will personally recommend using the grid and flexbox, which is supported on most modern browsers these days. But if you have to deal with ancient browsers, then consider the floating div… Just avoid using tables, as that is an outdated way to do product grids. Click here to download the source code in a zip file – I have released it under the MIT License, so feel free to build on top of it if you want to. Thank you for reading, and we have come to the end of this tutorial. I hope it has helped you to make a better eCommerce website, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding! The post 4 Simple Ways to Create CSS Product Grid appeared first on Code Boxx.float:left, give them a percentage width, and that is pretty much the mechanism behind it.height of each cell.THE PRETTY VERSION
THE RESULT
METHOD 2
FLEXBOXFLEXBOX BASICS
display:flex.flex-direction: row will automatically layout the children in the horizontal orientation.flex-wrap: wrap will break into a new row when the cells span out of the container width.THE PRETTY VERSION
THE RESULT
METHOD 3
GRIDGRID BASICS
display: grid.grid-template-columns to define the width of the cells.THE PRETTY VERSION
THE RESULT
METHOD 4
TABLETABLE GRID BASICS
Product
Product
Product
Product
Product
Product
THE PRETTY VERSION
THE RESULT
EXTRA
DOWNLOAD & MOREWHICH IS THE BEST?
DOWNLOAD
CLOSING
WHAT NEXT?
