CSS Grid Layout

Introduction to CSS Grid

CSS Grid is a powerful two-dimensional layout system designed for creating
complex website layouts using rows and columns.

While Flexbox is primarily designed for one-dimensional layouts, Grid allows
developers to control both rows and columns at the same time.

CSS Grid is especially useful for:

• Website page layouts.
• Admin dashboards.
• Course grids.
• Product galleries.
• Photo galleries.
• Portfolio layouts.
• News websites.
• Application interfaces.
• Responsive card systems.

1. Creating a Grid Container

To create a CSS Grid container, use:

.container {
    display: grid;
}

The direct children of the container automatically become
grid items.

<div class="container">

    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>

</div>

Grid becomes active when display: grid is applied to the parent.

2. Creating Columns

The grid-template-columns property defines the columns in a grid.

For example:

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

This creates three columns, each 200 pixels wide.

You can also use percentages:

.container {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
}

However, the fr unit is often more convenient for flexible
layouts.

3. The fr Unit

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

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

This creates three equal columns.

You can also create columns with different proportions:

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

The first column receives twice as much available space as the second column.

4. Creating Rows

The grid-template-rows property defines row sizes.

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

This creates three explicit rows.

You can also use flexible units:

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

5. The Repeat Function

The repeat() function makes repeated grid tracks easier to
write.

Instead of:

grid-template-columns: 1fr 1fr 1fr 1fr;

You can write:

grid-template-columns: repeat(4, 1fr);

This creates four equal columns.

You can combine repeat with other tracks:

grid-template-columns: 200px repeat(3, 1fr);

This creates one fixed 200-pixel column followed by three flexible columns.

6. Grid Gap

The gap property creates space between rows and columns.

.container {
    display: grid;
    gap: 20px;
}

You can control row and column gaps separately:

.container {
    row-gap: 20px;
    column-gap: 30px;
}

Using gap is usually cleaner than adding margins to every grid
item.

7. Grid Columns and Grid Rows

Grid creates numbered grid lines that can be used to position individual
items.

.item {
    grid-column: 1 / 3;
}

This tells the item to start at grid column line 1 and end at grid column
line 3.

It therefore occupies two column tracks.

Similarly:

.item {
    grid-row: 1 / 3;
}

This allows an item to occupy two row tracks.

8. Grid Column Span

The span keyword allows an item to occupy a specific number of
tracks.

.featured {
    grid-column: span 2;
}

This allows the item to occupy two columns from its automatic starting
position.

You can also span rows:

.featured {
    grid-row: span 2;
}

9. Named Grid Areas

CSS Grid allows developers to name areas of a layout.

.page {
    display: grid;

    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";

    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr auto;
}

Individual elements can then be assigned to these areas:

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

This makes complex page layouts easier to understand and maintain.

10. Grid Alignment

CSS Grid provides several alignment properties.

Common properties include:

• justify-items
• align-items
• place-items
• justify-content
• align-content
• place-content

Justify Items

.container {
    justify-items: center;
}

This controls horizontal alignment of grid items within their grid areas.

Align Items

.container {
    align-items: center;
}

This controls vertical alignment of grid items within their grid areas.

Place Items

The shorthand:

.container {
    place-items: center;
}

can center grid items along both axes.

11. Grid Item Alignment

Individual grid items can override container alignment using:

• justify-self
• align-self
• place-self

For example:

.special-card {
    justify-self: end;
}

Or:

.special-card {
    place-self: center;
}

12. Minmax Function

The minmax() function allows you to define a minimum and maximum
size for a grid track.

.container {
    grid-template-columns:
        repeat(3, minmax(200px, 1fr));
}

This means each column should be at least 200 pixels wide but can grow to
use available space.

This is very useful for responsive card layouts.

13. Auto-Fit

The auto-fit keyword can automatically create as many columns
as will fit into the available space.

.cards {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

This is one of the most useful responsive Grid patterns.

The number of columns can automatically change as the browser width changes.

14. Auto-Fill

The auto-fill keyword also creates as many tracks as possible.

.cards {
    grid-template-columns:
        repeat(auto-fill, minmax(250px, 1fr));
}

The difference between auto-fit and
auto-fill becomes especially noticeable when there are fewer
items than the available grid tracks.

For most card layouts, developers frequently use:

repeat(auto-fit, minmax(250px, 1fr))

15. Responsive Card Grid

A simple responsive card grid can be created without writing several media
queries.

.courses {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

The browser automatically determines how many cards can fit on each row.

16. Explicit and Implicit Grid

The tracks you explicitly define with
grid-template-columns and
grid-template-rows form the explicit grid.

When additional items require more tracks, the browser can create implicit
tracks automatically.

You can control their behavior using:

grid-auto-rows: 150px;

Or:

grid-auto-columns: 200px;

17. Grid Auto Flow

The grid-auto-flow property controls how automatically placed
items are inserted into the grid.

.container {
    grid-auto-flow: row;
}

You can also use:

.container {
    grid-auto-flow: column;
}

Another useful value is:

.container {
    grid-auto-flow: dense;
}

The dense value allows the browser to attempt to fill earlier
available spaces with smaller items.

18. CSS Grid Dashboard

Grid is excellent for dashboard interfaces.

.dashboard {
    display: grid;

    grid-template-columns:
        240px 1fr;

    grid-template-rows:
        70px 1fr;

    grid-template-areas:
        "sidebar header"
        "sidebar content";

    min-height: 100vh;
}

The dashboard components can then be assigned to named areas.

19. CSS Grid Gallery

Grid is also useful for image galleries.

.gallery {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(200px, 1fr));

    gap: 15px;
}

Each image can automatically adapt to the available space.

20. Creating a Featured Grid Item

A featured item can occupy multiple columns.

.featured {
    grid-column: span 2;
}

This can be used for:

• Featured blog posts.
• Featured products.
• Featured courses.
• Hero content.
• Dashboard statistics.

21. Grid and Responsive Design

CSS Grid works extremely well with responsive design.

For example:

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 30px;
}

@media (max-width: 768px) {

    .layout {
        grid-template-columns: 1fr;
    }

}

On large screens, the layout contains two columns.
On smaller screens, it changes to one column.

22. CSS Grid vs Flexbox

Both Flexbox and Grid are modern CSS layout systems, but they are designed
for different types of problems.

They are not competing technologies. In modern web development, developers
frequently use them together.

23. Combining Grid and Flexbox

A website can use Grid for the main page structure and Flexbox inside
individual components.

.page {
    display: grid;
    grid-template-columns: 240px 1fr;
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

This combination provides powerful control over both large-scale and
component-level layouts.

24. Common CSS Grid Mistakes

Mistake 1: Forgetting Display Grid

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

This does not create a grid unless the element also has:

.container {
    display: grid;
}

Mistake 2: Creating Too Many Fixed Columns

A layout such as:

grid-template-columns:
    300px 300px 300px 300px;

may become too wide on smaller screens.

Flexible units such as fr and functions such as
minmax() are often better for responsive designs.

Mistake 3: Ignoring Overflow

Fixed-width grid tracks can cause horizontal scrolling if the available
viewport becomes too narrow.

Mistake 4: Confusing Grid Lines and Tracks

A grid with three columns has four vertical grid lines.

grid-column: 1 / 3;

means the item occupies the space between lines 1 and 3, which is two
columns.

25. Developer Tools

Modern browser Developer Tools provide visual tools for inspecting CSS Grid.

When a grid container is inspected, the browser may display:

• Grid lines.
• Grid numbers.
• Grid areas.
• Track sizes.
• Gaps.
• Item placement.

This makes Developer Tools extremely useful when debugging complex layouts.

26. Practical Project

Build a responsive Dwallnet Academy dashboard with:

1. A sidebar.
2. A top header.
3. A main content section.
4. Four statistics cards.
5. A course grid.
6. A featured course that spans two columns.
7. A responsive mobile layout.

Use named grid areas for the main dashboard structure.

27. CSS Grid Cheat Sheet

Conclusion

CSS Grid is one of the most powerful tools available to modern web
developers for creating structured two-dimensional layouts.

With Grid, you can build responsive dashboards, course systems, product
pages, portfolios, galleries, blogs, and complete website structures using
clean and maintainable CSS.

The most important concepts to master are
grid-template-columns,
grid-template-rows,
gap,
grid-column,
grid-row,
grid-template-areas,
minmax(), and
repeat().

Once you understand both Flexbox and Grid, you have two of the most important
modern CSS layout systems needed to build professional responsive websites.