CSS Grid display

Intro

Precursor to Flex Box and is antiquated but still has some uses today. Grid is better for situations where we need control over the children and their appearance. For flexible layouts, use Flex Box.

Basic Set up Apply display: grid to the parent container.

Unlike Flex Box, with Grid, the dev needs to tell it to create a number of columns and rows otherwise it’s just a column with the necessary amount of rows. Using the fr unit (short for “fraction”) to inform how to structure the grid. Example:

.parent{
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 2fr; /* Tells it to make 2 columns, the latter taking 2/3 of space*/
}

Can add a repeat function to add auto fill and responsiveness

.parent{
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 2fr; /* Tells it to make 2 columns, the latter taking 2/3 of space*/
	repeat(auto-fill, minmax(200px, 1fr));
}

Controlling Children

this is where we really benefit from Grids.

.children: nth-child(1),
.children: nth-child(3),
.children: nth-child(5){
	grid-column: span 3;
}

// Add more to this file, explore Grids.