What you will learn
- Define grid columns and rows with grid-template-columns and fr units
- Place items across multiple columns or rows
- Decide when to use Grid and when to use Flexbox
CSS Grid controls rows and columns at the same time. Setting display: grid on a container and grid-template-columns: 1fr 1fr 1fr creates three equal columns. The fr unit means a fraction of the free space. Add gap to space the cells. The repeat() function shortens this, so repeat(3, 1fr) means the same thing, and children fill the cells in order.
A very useful pattern is grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). It fits as many columns as possible, each at least 250 pixels wide, and stretches them to fill the row. The grid adjusts as the screen changes without any extra rules. Individual items can span several cells with properties such as grid-column: span 2, which suits a featured product or a wide banner.
Grid and Flexbox work well together. A good rule of thumb is to use Grid for the overall page or a gallery, where rows and columns both matter, and Flexbox for arranging items inside a component, such as a card's title and button. To finish your first page, combine semantic HTML, a consistent colour and type style, Grid for the layout and Flexbox for the details.