CSS Grid- CSS Course

CSS Grid: Introduction

CSS Grid is a two-dimensional layout system that allows organizing HTML elements into rows and columns. It's ideal for complex structures, responsive pages, and precise layouts.

Activating the Grid

To activate the Grid system, apply the display: grid property to a container. Alternatively, you can use display: inline-grid for inline behavior. All direct children of this container automatically become grid items.

Basic Terminology

Before building a layout with CSS Grid, it's important to understand the fundamental terms:

• Grid container – the element with display: grid. It's the framework where the grid is built.
• Grid item – any direct child of the container. These are the elements positioned within the grid.
• Track – a column or a row in the grid.
• Line – the line that separates two tracks. It can be used for positioning.
• Area – a rectangular zone formed by multiple cells, defined using grid-area.

Defining the Structure

The grid structure is established by defining columns and rows. The properties grid-template-columns and grid-template-rows are used to create a flexible or fixed framework.

• Fixed units: px, % – exact dimensions
• Flexible units: fr – fractions of the available space
• Useful functions: repeat() – repeats values; minmax() – defines flexible limits

Example:

grid-template-columns: repeat(3, 1fr);
grid-template-rows: minmax(100px, auto);

This code creates 3 equal columns and rows that have a minimum height of 100px and can expand automatically.

Spacing Between Elements

CSS Grid offers precise control over the space between columns and rows using the gap property. It can be applied globally or separately on each axis.

• gap – defines the space between all columns and rows
• row-gap – defines the space only between rows
• column-gap – defines the space only between columns

Example:

grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px;
gap: 20px;

This code creates 3 equal columns, a single row of 150px, and a 20px gap between all cells.

Aligning Elements

CSS Grid provides control over alignment both at the container level and at the item level. These properties help distribute space and position elements inside the grid cells.

At the Container Level

• justify-content – horizontal alignment of the grid within the container
• align-content – vertical alignment of the grid within the container
• place-content – shorthand for both

At the Item Level

• justify-items – default horizontal alignment of items
• align-items – default vertical alignment of items
• justify-self – individual horizontal alignment
• align-self – individual vertical alignment
• place-self – shorthand for both

Example:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

All items will be centered on both axes inside their cells.

Manual Positioning

CSS Grid allows precise positioning of elements within the grid using start and end lines. You can use individual properties or shorthand versions.

• grid-column-start / grid-column-end – positions on the horizontal axis
• grid-row-start / grid-row-end – positions on the vertical axis
• grid-column / grid-row – shorthand for start / end
• grid-area – full shorthand: grid-row-start / grid-column-start / grid-row-end / grid-column-end

Example:

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

The item will occupy columns 2 and 3 and rows 1 and 2.

Visual Layout with Named Areas

CSS Grid allows the definition of a semantic and maintainable layout using grid-template-areas. Each area is named and assigned to an item using grid-area.

Example of defining the areas:

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

Each grid item must be assigned to a named area:

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

Auto-Filling and Flexible Layout

CSS Grid allows automatic generation of columns or rows based on the available space using auto-fill and auto-fit. These are useful in responsive layouts.

• auto-fill – creates as many columns as possible, even if some remain empty
• auto-fit – creates columns that adjust to the available content
• minmax() – defines the minimum and maximum size limits of a column

Example:

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

This code creates columns with a minimum width of 150px that expand to an equal fraction of the available space. The number of columns adjusts automatically.

Automatic Flow and Default Dimensions

CSS Grid can automatically generate rows or columns for elements that don't have a defined position. This behavior is controlled using the grid-auto-flow, grid-auto-rows, and grid-auto-columns properties.

• grid-auto-flow – sets the direction in which elements are automatically placed: row, column, or dense
• grid-auto-rows – defines the default height of automatically generated rows
• grid-auto-columns – defines the default width of automatically generated columns

Example:

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 120px;
}

This code creates columns with a width of 120px, and elements are automatically placed in columns.

Grid on Individual Elements

Each element within a grid can be manually positioned using specific CSS properties. These offer full control over placement in rows and columns.

• grid-column-start / grid-column-end – defines position on the horizontal axis
• grid-row-start / grid-row-end – defines position on the vertical axis
• grid-area – shorthand for all four properties

Example:

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

This code places the element between columns 2 and 4 and between rows 1 and 3.

Implicit vs. Explicit Grid

In CSS Grid, we can define the structure explicitly or let the browser generate it automatically (implicitly).

• Explicit Grid – defined using grid-template-rows and grid-template-columns
• Implicit Grid – automatically generated for elements that exceed the defined structure
• grid-auto-rows and grid-auto-columns – control the default dimensions

Example:

.grid {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 80px;
}

Here, two columns are explicitly defined, and any additional rows are implicitly generated with a height of 80px.

Grid Nesting and Subgrid

CSS Grid allows the creation of grids inside other grids. This is called nesting. Starting with the CSS Subgrid specification, we can even synchronize inner grids with their parent grid.

• Nesting – an element within a grid becomes a container for another grid
• Subgrid – allows inheriting grid lines from the parent container
• grid-template-columns: subgrid – enables subgrid behavior

Subgrid is supported only in modern browsers (Firefox, Safari, Chromium 117+).

Display Order and Layering in Grid

CSS Grid allows control over the order in which elements are displayed and their layering using properties like order and z-index.

• order – sets the display order within the grid (works only on elements with display: grid or flex)
• z-index – controls which element appears above another
• position – must be set to relative, absolute, or fixed for z-index to take effect

Example:

.item {
  order: 2;
  position: relative;
  z-index: 10;
}

This code moves the element to the second position and brings it above other elements.

Grid and Media Queries

CSS Grid works excellently with media queries, allowing the layout to adapt based on screen size.

• @media – allows defining conditional styles
• grid-template-columns – can be modified for different resolutions
• repeat() and minmax() – useful for fluid layouts

Example:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

This code displays 4 columns on large screens and only 2 columns on small screens.

Grid and Fallbacks for Older Browsers

Although CSS Grid is supported by most modern browsers, some older versions do not recognize it. In such cases, fallbacks or feature queries can be used.

• @supports – checks if the browser supports a CSS property
• display: flex – can be used as a simple alternative
• Graceful degradation – provides a functional but simpler version

Example:

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

This code applies Grid only if the browser supports it; otherwise, it falls back to Flexbox.

Page Layout with Grid

A typical page layout includes:

• Header – the top section
• Sidebar – the side menu
• Content – the main area
• Footer – the bottom section

We use grid-template-areas to visually define the structure.

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

Responsive Image Gallery

We use grid-template-columns with auto-fit and minmax() to create a gallery that automatically adapts to the screen size.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

This code creates columns that automatically expand, with a minimum width of 150px.

Dashboard with Dynamic Cards

We use grid-template-columns with auto-fit and minmax() to create a flexible layout where cards automatically rearrange based on available space.

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

The cards will expand and reorganize automatically across different screen sizes.

Applied Project: Complete Layout with CSS Grid

This layout combines all the concepts learned: named areas, auto-fill, alignment, layering, media queries, and fallbacks.

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "sidebar gallery"
    "sidebar dashboard"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 20px;
  padding: 20px;
}

🛠️ Useful Tips for CSS Grid

• ✅ Use fr for flexible layouts – distributes space proportionally
• ✅ Combine Grid with Flexbox – Grid for structure, Flex for details
• ✅ Test with DevTools – visualize grid lines and areas
• ✅ Use minmax() and auto-fit for responsive layouts
• ✅ Define grid-template-areas for clarity and easy maintenance
• ✅ Don't overuse z-index – keep layering simple
• ✅ Use @supports for elegant fallbacks

These tips help you build layouts that are robust, clear, and adaptable.

CSS Grid is not just a layout system — it's a visual language. The better you understand it, the more clearly you can express your ideas.

🧠 Quiz – CSS Grid: Introduction

Congratulations! This introductory course ends here. In the next course, you'll learn the JavaScript programming language. Good luck and happy learning!