{"id":27947,"date":"2019-12-11T00:00:00","date_gmt":"2019-12-10T23:00:00","guid":{"rendered":"https:\/\/blexin.com\/css-grid-best-practices\/"},"modified":"2021-05-20T18:47:05","modified_gmt":"2021-05-20T16:47:05","slug":"css-grid-best-practices","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/css-grid-best-practices\/","title":{"rendered":"CSS Grid: Best Practices"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

In previous examples, we have seen how to build layouts using as reference numeric values assigned to lines. Now we will explore some Best Practices that help us to simplify our job.
The first method is to define names to assign to columns templates and eventually to rows:<\/p>\n\n\n

\n.container {\ndisplay: grid;\ngrid-template-rows: 100px 50px 300px 80px;\ngrid-template-columns: repeat(3, [container-start] 1fr) 300px [container-end];\n}\n<\/pre><\/div>\n\n\n
With this method we can use names, we have previously defined, instead of numbers:<\/p>\n\n\n
\n.header {\n\u00a0\u00a0\u00a0\u00a0grid-column: container-start \/ container-end;\n}\n.navbar {\n\u00a0\u00a0\u00a0\u00a0grid-column: container-start \/ container-end;\n}\n.footer {\n\u00a0\u00a0\u00a0\u00a0grid-column: container-start \/ container-end;\n}\n<\/pre><\/div>\n\n\n
The last approach is to assign names to areas: I consider this method not flexible enough, and it can be adapted with difficulties to more significant projects.
Using the property:<\/p>\n\n\n
\ngrid-template-areas\n<\/pre><\/div>\n\n\n
I assign names to areas, which are made up of cells groups, as we have seen before. For example, to define the template for .header<\/strong>, in the .container<\/strong> selector I assign the name of the area, grouping four cells:<\/p>\n\n\n
\ngrid-template-areas: "header header header header"\n<\/pre><\/div>\n\n\n
I recall the template of the area dedicated to the .header<\/strong> selector using the property:<\/p>\n\n\n
\ngrid-area: header;\n<\/pre><\/div>\n\n\n
This is the complete example:<\/p>\n\n\n
\n.container {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-rows: 100px 50px 300px 80px;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(3, 1fr) 300px;\n\u00a0\u00a0\u00a0\u00a0grid-template-areas: "header header header header"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"navbar navbar navbar navbar"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"content content content sidebar"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"footer footer footer footer";\n}\n.header {\n\u00a0\u00a0\u00a0\u00a0grid-area: header;\n}\n.navbar {\n\u00a0\u00a0\u00a0\u00a0grid-area: navbar;\n}\n.content {\n\u00a0\u00a0\u00a0\u00a0grid-area: content;\n}\n.sidebar {\n\u00a0\u00a0\u00a0\u00a0grid-area: sidebar;\n}\n.footer {\n\u00a0\u00a0\u00a0\u00a0grid-area: footer;\n}\n<\/pre><\/div>\n\n\n
How to adapt the grid to mobile devices without using media queries<\/h2>\n\n\n\n
Let\u2019s start with the following markup and its style sheet:<\/p>\n\n\n
\n.container {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-rows: 100px 50px auto 80px;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(3, 1fr) 300px;\n}\n.header {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n}\n.navbar {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n}\n.content {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -2;\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(3, 1fr);\n\u00a0\u00a0\u00a0\u00a0grid-auto-rows: 125px;\n\u00a0\u00a0\u00a0\u00a0gap: 20px;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&__item {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: orange;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\u00a0\u00a0\u00a0\u00a0}\n}\n.footer {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n}\n<\/pre><\/div>\n\n\n
Please note that we assigned the value auto<\/em> to define the height of the row, which contains the .content<\/strong> and the .sidebar<\/strong><\/p>\n\n\n
\ngrid-template-rows: 100px 50px auto 80px;\n<\/pre><\/div>\n\n\n
This expedient insures that the height of the block will be adaptable to the number of contents contained in it.
The goal is to put the .sidebar<\/strong> under the .content<\/strong> in the mobile version and to make the blocks contained in .content<\/strong> arranged based on the width.
Let\u2019s modify now the property grid-template-columns<\/strong>.
We will not specify the columns quantity (3), but we will use the property auto-fit<\/strong>, which will automatically generate traces based on space available.<\/p>\n\n\n
\ngrid-template-columns: repeat(3, 1fr) 300px;\ngrid-template-columns: repeat(auto-fit, 1fr) 300px;\n<\/pre><\/div>\n\n\n
Furthermore, thanks to the minmax<\/strong> function, we will specify a minimum width<\/strong> (300px) and a maximum one<\/strong> (1fr): on small displays the column width will be then 300px, but on those larger will be 1fr.<\/p>\n\n\n
\n\/* grid-template-columns: repeat(auto-fit, 1fr) 300px; *\/\ngrid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n<\/pre><\/div>\n\n\n
We did not define a fixed width for the .sidebar<\/strong>, which maintains its position because we decided that the .content<\/strong> should occupy the space between rows 1<\/strong> and -2<\/strong>:<\/p>\n\n\n
\n.content {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -2;\n}\n<\/pre><\/div>\n\n\n
Regarding blocks contained in .content<\/strong>, we will delete the specific number of columns in favor of the function auto-fit<\/strong>, and of the definition of a minimum and a maximum height:<\/p>\n\n\n
\n\/* grid-template-columns: repeat(3, 1fr); *\/\ngrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n<\/pre><\/div>\n\n\n
The final code will be then as follows:<\/p>\n\n\n
\n.container {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-rows: 100px 50px auto 80px;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&>* {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: #5c5c5c;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\u00a0\u00a0\u00a0\u00a0}\n}\n.header {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n\u00a0\u00a0\u00a0\u00a0background: coral;\n}\n.navbar {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n\u00a0\u00a0\u00a0\u00a0background: brown;\n}\n.content {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -2;\n\u00a0\u00a0\u00a0\u00a0background: gray;\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n\u00a0\u00a0\u00a0\u00a0grid-auto-rows: 125px;\n\u00a0\u00a0\u00a0\u00a0gap: 20px;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&__item {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: orange;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: #ffffff;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\u00a0\u00a0\u00a0\u00a0}\n}\n.sidebar {\n\u00a0\u00a0\u00a0\u00a0background: orangered;\n}\n.footer {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n\u00a0\u00a0\u00a0\u00a0background: brown;\n}\n<\/pre><\/div>\n\n\n
This is the result we obtained:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Flexbox vs. CSS Grid<\/h2>\n\n\n\n
The question which often arises is: what happens to Flexbox now? Actually, the two modules can be used in combination:<\/p>\n\n\n\n