In the web design, the use of responsive grid to display products is a common practice. It helps to create a balanced layout. When it comes to choosing the right number of divisions for a grid, 12 is often considered as the perfect choice.
Twelve (and its multiples) is a highly divisible number. It can be divided by 1, 2, 3, 4 and 6. This allows for a consistent division of space that can be used for different screen sizes. Using a 12‑column grid is great for displaying product cards on any device.
The beauty of the grid is that it cares about the width of the cards. And also the gaps between them. In short - it keeps everything in order.
See the example below. If you are on a PC you can change the window width to see how the grid accommodates the number of elements and the space between them. If you are using touch devices, change the orientation of the display.
| Window width: | px |
| Tailwind breakpoint: | mobilesmmdlgxl2xl |
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Turn any design into HTML and Tailwind CSS code.
Have you noticed the sticky green stripe at the top of the page? It shows the window width and the corresponding breakpoint.
Breakpoints are an important aspect of responsive web design. They are used to define the specific widths at which the layout of a website will change in order to adapt to different screen sizes and devices.
For example, on a wide desktop screen, the grid above will show 6 cards in a row, but on a mobile screen, it will show only 2 cards in a row.
This page is coded in HTML and Tailwind CSS. Tailwind uses 5 named breakpoints for building responsive designs. Each breakpoint represents a specific screen size range:
Tailwind follows a mobile-first approach by default, which means that you don't need to add a breakpoint for mobile screens as the unprefixed utilities work on all screen sizes.
However, if you want to target larger screens specifically, you can use prefixed utilities like lg:gap-4, which will only take effect at the specified breakpoint and larger screen sizes.
The size of the gap between grid elements can affect the overall look and feel of a design. Large gaps can create a sense of openness and elegance, while small gaps can create a more compact and dense layout.
For less expensive products, using smaller gaps creates a sense of abundance. It encourages users to browse through multiple items. For luxury products, wider gaps create a sense of exclusivity and give the items more room to breathe.
With the proper use of breakpoints and a responsive grid, your product cards will look great on any device and provide a seamless customer experience.