CSS Grid Mastery: STEP BY STEP

Over time, the field of web design has undergone substantial change. Layout approaches have advanced significantly from the early days of HTML tables to flexbox and now to the powerful CSS Grid. CSS Grid is one of the most effective techniques for creating intricate, adaptable, and responsive web layouts. It gives developers complete control over web page layouts by enabling the creation of complex grid structures without the need for other frameworks.

We will get further into CSS Grid in this post, learning its fundamentals, utilizing the display: grid property, and looking at a number of real-world applications and recommended practices. Whether you’re a developer with years of expertise who wants to brush up on what they know or a beginner who is struggling to understand CSS Grid, this book will give you a firm grasp.

What is CSS Grid?

A two-dimensional web layout system is called CSS Grid Layout. In contrast to flexbox, which operates on just one axis (either vertically or horizontally), it allows layout customization in two dimensions at once. This implies that it’s simple to organize stuff into rows and columns.

A container element becomes a grid container and all of its direct children become grid items when display: grid is applied to it. The different grid characteristics that we’ll go over later can be used to arrange these grid objects into a structured grid layout.

CSS Grid Basics

You must apply the display: grid attribute to a container element in order to define it as a grid container before you can begin utilizing it. Here’s a basic illustration:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
    gap: 10px; /* 10px gap between items */
}

Tutorials

• display: grid: This turns the container into a grid.
• grid-template-columns: Defines how many columns the grid will have and how wide they should be. In the above tutorial, we’re creating 3 columns, each occupying an equal amount of space (1 fraction of the available width).
• gap: Adds space between the grid items (both horizontally and vertically).

Grid items (components inside the .container) can now be added; they will be positioned in the grid automatically.

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
</div>

This will result in a layout where items are displayed in 3 columns with equal widths.

Key Properties of CSS Grid

grid-template-columns and grid-template-rows

These properties are used to define the size of the columns and rows in the grid.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 3 columns with varying widths */
    grid-template-rows: auto; /* Rows height will adjust based on content */
}

• grid-template-columns: Defines the columns. In this tutorial, the first and third columns will take up 1 fraction unit (fr), while the second will take up 2 fraction units (fr).
• grid-template-rows: Defines the row heights. Here, we’re using auto, which means the rows’ height will automatically adjust to the height of their content.

2-grid-gap or gap

This property sets the spacing between grid items.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* 20px gap between both rows and columns */
}

3-grid-template-areas

The grid-template-areas property allows you to visually define the layout structure by naming areas within the grid.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header header header" 
                         "main main sidebar" 
                         "footer footer footer";
}

You can then assign grid items to specific areas by referring to the names:

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

This allows for more readable and manageable layouts, especially in larger projects.

4-grid-auto-rows and grid-auto-columns

These properties define the size of rows and columns that are implicitly created (i.e., when there are more items than can fit in the explicitly defined rows/columns).

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto); /* Automatically grows, but with a minimum height of 100px */
}

5-justify-items, align-items, place-items

These properties control how grid items are positioned within their respective grid cells.

• justify-items: Aligns items horizontally within their grid area.
• align-items: Aligns items vertically within their grid area.
• place-items: A shorthand for setting both justify-items and align-items.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center; /* Align horizontally to the center */
    align-items: center;   /* Align vertically to the center */
}

Advanced Techniques with CSS Grid

Grid Item Placement: grid-column and grid-row

.item1 {
    grid-column: 1 / 3; /* Starts at column 1, ends at column 3 */
    grid-row: 1 / 2;    /* Starts at row 1, ends at row 2 */
}

Responsive Design with CSS Grid

Creating responsive layouts is made simple with CSS Grid. For example, media queries can be used to construct a grid that, on smaller displays, transitions from many columns to a single column.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 600px) {
    .container {
        grid-template-columns: 1fr; /* Switch to a single column */
    }
}

Nesting Grids

Building intricate layouts is made even more flexible with it’s ability to nest grids inside grids.

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

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

Combining Grid with Flexbox

Flexbox and CSS Grid are frequently combined to produce even more intricate and responsive layouts. For instance, CSS Grid manages the overall page layout, but Flexbox can be utilized inside specific grid items to align text within each cell.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
}

Best Practices for CSS Grid

1-Use fr units for flexible layouts

One of the most helpful units in CSS Grid is the “fraction of available space” (fr) unit. It enables you to design layouts that change dynamically according to the grid container’s available space.

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

Keep Layouts Simple

Although It can produce intricate layouts, it’s best to make them as basic as possible. Don’t make things too complicated by layering too many grids inside grids.

Embrace Flexibility

You have complete control over the layout with CSS Grid, but it also works well with other layout techniques. For optimal effects, combine it with flexbox and other strategies.

Conclusion

The way we construct web pages has changed as a result of the powerful layout tool CSS Grid. Display: grid makes it simple to design intricate and adaptable layouts. It is ideal for creating flexible websites because of its two-dimensional design, which gives you exact control over both columns and rows.

You’ll become more assured of your ability to design intricate and flexible layouts without the need for intricate workarounds or third-party frameworks as you get more comfortable with CSS Grid. This tool offers an unmatched degree of versatility and control, from simple grids to sophisticated methods.

Now that you understand the fundamentals and more complex ideas of CSS Grid, it’s time to use this layout system to its fullest by experimenting with your own projects!