When asked about their favorite layout system, front-end devs often discards " " and consider it as non-effective since it achieves the same goals of other systems with many more code lines. Especially if responsiveness is required. I've been using css grids for a long time (it's my favorite) and I learned about a case where it's better to opt for css grids rather than other layout systems. CSS grids It's the case when a container holds a collection of boxes (e.g articles or videos preview links) and we want it to be responsive regardless of the number of boxes or their size Why we should use "CSS grids"? Unlike other layout systems, . This means that we can place an element on whatever position of the page/the container if we manage to properly set the grid for it. css grid is a 2D layout system that enables easy positioning of elements relatively to 2 axes Of course, I cannot lecture you on the usage of css properties better than numerous resources that we learned from(God bless them) and I am going to leave links to some of them below. However, I want to shed light on one of the most underrated tricks of "CSS grids". It's Establishing responsiveness in a container with fewer code lines (i.e basically without media queries) How to build a responsive "CSS grids" container ? First, let's get a visual representation of what I am describing. Check below: The container before applying the "CSS grids" trick As you can see, this kind of container is often used when we want to place articles/videos previews behaving as a link. Mainly, we seek to keep the boxes positioned accordingly to the screen width while maintaining suitable dimension ratios. Using media queries for this kind of situation is possible. But, it's gonna cost a lot of css code lines that can eventually affect the loading speed of the page in a deployed website (of course :)). Alternatively, there is a (I like to call it so) that uses "CSS grids" properties and most importantly, doesn't count on using media queries (at least for the layout). Below, I list down the main "CSS grids" properties & attributes that contribute to this trick: magical solution grid-template-columns grid-template-rows repeat auto-fill auto-fit minmax The last four are the key to achieve responsiveness. " " is a function that enables splitting the container (on a specified axis) according to a couple of arguments. repeat The first argument , either "auto-fill" which make sure that the free space is filled with the maximum number of boxes without acting on their width/height, or "auto-fit" which make sure to leave less free space as possible by adjusting the dimensions of the boxes if no more can be added to the line. " sets the policy for filling the available space of the container " The second argument " . sets the range of possible width/height that the specified policy (first argument) can attribute to the boxes" To get practical, I have set an example for us to explore what these properties are capable of. If we use , it will occupy as least space as possible within the specified range. However, " " acts on the dimension of the box if there is available space. auto-fill auto-fit With the dimension ranges set in advance, the boxes will be arranged accordingly with the screen size. "auto-fill" Vs "auto-fit" : ; : 1 ; : ( , (150 , 1 )); display grid grid-template-rows fr grid-template-columns repeat auto-fit minmax px fr Notice that we didn't use media queries for this one. Consequently, we have saved ourselves from writing a bunch of code lines while realizing the same goal. Boxes arrangement is adjustable according to the screen width The proposed trick may reduce pages' loading speed. But it surely enables the front-end developers to achieve responsiveness while writing and managing lesser & cleaner code. Useful links: A "CSS-tricks" Article that sums up all CSS grids features and how to implement them. Read [ ] article A Pen Project where I actually used the trick. Check [ ] CodePen
