Grids in CSS: Structuring Your Web Masterpiece

A layout system for rows and columns. Where Flexbox handles alignment within a single row or column, Grid is built for two-dimensional layouts: headers, sidebars, content areas, and footers in one structure.

What is CSS Grid?

CSS Grid Layout (usually just called Grid) is optimised for two-dimensional layouts. You define rows and columns explicitly, which makes page-level structures much easier than older CSS techniques.

Basic concepts

Two terms to know:

• Grid container: The parent element with display: grid; applied.
• Grid items: The direct children of the grid container.

Creating a grid container

HTML first:

<div class="grid-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <!-- More items -->
</div>

Then the CSS:

.grid-container {
    display: grid;
}

Defining rows and columns

Use grid-template-columns and grid-template-rows to set the layout structure:

.grid-container {
    display: grid;
    grid-template-columns: 100px 200px auto;
    grid-template-rows: 50px 100px;
}

That gives three columns (100px, 200px, and the remaining space) and two rows at different heights.

Gap between rows and columns

Add space between items with grid-gap, or use row-gap and column-gap separately:

.grid-container {
    display: grid;
    grid-gap: 10px; /* Adds a 10px gap between rows and columns */
}

Placing items in the grid

Place items in specific cells with grid-column-start, grid-column-end, grid-row-start, and grid-row-end:

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

That spans item1 from column 1 to column 3 in the first row.

Using the fr unit

The fr unit represents a fraction of the available space in the grid container:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Three columns with the middle one twice as wide */
}

Grid template areas

grid-template-areas lets you define a layout visually with named regions:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        "header header header"
        "main main sidebar"
        "footer footer footer";
}

.header {
    grid-area: header;
}

.main {
    grid-area: main;
}

.sidebar {
    grid-area: sidebar;
}

.footer {
    grid-area: footer;
}

That sets up a header, main content, sidebar, and footer.

Responsive grids

Change grid definitions inside media queries so layouts adapt to screen size:

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr 2fr;
    }
}

On screens wider than 600px, the layout switches to two columns.

Grid is worth learning properly if you build page layouts regularly. Start with simple column definitions, then try template areas and responsive breakpoints. Flexbox and Grid work well together – Grid for the overall page structure, Flexbox for alignment within each area.