The CSS Grid Layout Module makes browsers display the selected HTML elements as grid box models. Grid allows you to easily resize and reposition a grid container and its items two-dimensionally. Note: "Two-dimensionally" means grid modules allow simultaneous laying out of box models in rows and columns.

Flex layout makes it easier to design and build responsive web pages without using many float and position properties in the CSS code. To start using Flexbox, you have to create a flex container using the display: flex property. Every element inside the particular flex container will act as a flex item.

Solution One: background-color Whatever colour we want our grid lines to be (in this example: black), we set that colour as the background colour for the . grid wrapper. Then, we apply a background colour to our . grid__item 's (in this example: white).