Understanding Grid Fundamentals

In this lesson, we’ll look at CSS Grid layout. We’ll learn how to create grid containers and grid items, define grid structures, place grid items, and use grid gaps. By mastering these basics, we’ll establish a solid groundwork for more advanced grid techniques.

Creating grid containers and grid items

To begin using CSS Grid, we need to establish a grid container. This is done by setting the display property of an element to grid or inline-grid.

In the above code:

• Line 1 (HTML): We have created a <div> with the class grid-container, which will serve as our grid container.

• Lines 2–5 (HTML): The grid-item elements are the direct children of the grid container and become grid items.

• Line 2 (CSS): We set display: grid; on the .grid-container to establish a ...