![pure responsive grids dont work pure responsive grids dont work](http://wanderingmist.com/wp-content/uploads/greenery-pantone_9-300x206.jpg)
The reason we didn’t use display: grid for this section is that our heights for each card are dynamic. This is very similar to our overview cards, where we used grid-gap.
![pure responsive grids dont work pure responsive grids dont work](https://bashooka.com/wp-content/uploads/2013/03/wp-pricing-tables-2.jpg)
We also apply a gap between the cards with column-gap. Using column-count will ensure that our content inside of the main-cards section gets split into two columns. They must scale with each other in relative fr units for this method to work, however, which is why we won’t use it for our cards shown below. This will prevent any empty row spaces due to different image heights. You even have access to dynamic packing algorithms with the grid-auto-flow: dense instruction. Using the column repeat method is also a fantastic way to build beautiful, responsive image galleries, even with images of differing sizes. When cards wrap to a new row ( auto-fit), they will line up from left to right with the cards above them, matching their widths! And you also get built-in responsiveness without any media queries!.If cards go above 265px in width, they will stretch to take up the available remaining container width.If cards go below 265px in width, they will wrap to another row.Our instruction repeat(auto-fit, minmax(265px, 1fr) takes care of a couple of major hurdles: Neat how we used a grid container for these, which is inside of our main page grid container, right? We did this because it’s the most straightforward, elegant solution to use for the needed responsiveness of the card items. The very nice, responsive grid overview cards Adding the header and footerīoth the and the will be flex containers, with flex spacing and alignment: Finally, we declare our, also at a height of 50px. This means that it will vertically stretch to fill the remaining window space after explicitly-declared heights have been drawn. Then we declare the content area, which is given a height of 1fr. So, starting at the top, we have a element that is 50px tall. That means that it will take up the remaining container space after the first column has been drawn. The first column is 250px wide (the side nav), and the second one is 1fr, or fraction. We have two columns total from left to right. We basically assigned each of our child containers a name, and then threw them into a spreadsheet-like format via grid-template-areas. Our simple dashboard with responsive inner content and sliding side nav Grid-template-areas explained