Using #css Grid where appropriate (revisited)
▻https://hackernoon.com/using-css-grid-where-appropriate-revisited-53df7dbcec6a?source=rss----3a
This solution is a follow-up post on my last year’s article “Using CSS Grid where appropriate”. The goal is to find a solution for navigation with an unknown number of items.RECAPCreating navigation with CSS Grid is arguably not the best solution. However, if one wants to use CSS Grid, two options were suggested:Using grid-auto-flow: row; and placing each item in the grid, like this:.nav__item:nth-child(1) grid-area: 1 / 1 / 2 / 2;Defining a definite grid using keyword auto for setting width of the rows and columns:.nav display: grid; grid-auto-flow: row;@media screen and (min-width: 320px) .nav grid-template-columns: repeat(4, auto); grid-template-rows: repeat(2, auto); In both examples, we are defining a strict grid — a number of columns in a row are strictly (...)
#css-grid #software-development #design #css-grid-appropriate
