What is Display: grid in CSS?

display grid graphic

display: grid is a CSS declaration that turns an HTML element into a grid container. Its direct children become grid items that can be arranged across rows and columns.

CSS Grid is useful when a layout needs control in two dimensions. Instead of manually calculating widths or stacking containers inside containers, you can define the structure of the layout and let CSS place the items within it.

We use CSS Grid regularly when building responsive cards, service layouts, portfolios, blog archives, and other structured sections. If your website needs a more flexible and maintainable foundation, learn more about our web design in New Jersey services.

What does display: grid do?

The simplest grid starts with one line of CSS:

.container {
    display: grid;
}

Once display: grid is applied, .container becomes a grid container and its direct children become grid items.

For example:

<div class="container">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>
.container {
    display: grid;
}

At this point, the layout may not look dramatically different. By default, the items will still appear in a single column.

The real power of CSS Grid starts when you define the columns or rows.

How do you create columns with CSS Grid?

Use grid-template-columns.

For example:

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

This creates three equal-width columns.

The three child elements would now appear side by side:

One | Two | Three

What does fr mean in CSS Grid?

fr stands for a fraction of the available space.

This:

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

splits the available width into three equal portions.

You can also create unequal columns:

grid-template-columns: 2fr 1fr;

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

That makes fr especially useful for flexible layouts where fixed pixel widths would be too restrictive.

Using fixed and flexible column widths

Grid columns do not all need to use the same unit.

You could write:

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

This creates:

  • A fixed 300px first column
  • A second column that uses the remaining space

That can work well for layouts such as:

Sidebar | Main content

You can also combine percentages, pixels, rem, fr, and other supported CSS sizing units depending on the layout.

What does repeat() do in CSS Grid?

repeat() prevents you from writing the same column definition repeatedly.

Instead of:

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

you can write:

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

Both create four equal-width columns.

This becomes particularly useful for larger grids.

For example:

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

creates a traditional 12-column layout.

How do you add space between grid items?

Use the gap property.

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

This creates 24 pixels of space between the rows and columns.

You can also control them separately:

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

For most layouts, using gap is cleaner than adding margins to every individual grid item.

How do you make a responsive CSS Grid?

One of the most useful Grid patterns combines:

  • repeat()
  • minmax()
  • auto-fit

For example:

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

This is an extremely useful responsive card layout.

It tells the browser:

Create as many columns as will fit, keep each column at least 250px wide, and allow each one to grow to fill the available space.

On a large desktop, the result might be:

Card | Card | Card | Card

On a smaller screen:

Card | Card
Card | Card

And eventually on mobile:

Card
Card
Card
Card

In many situations, this lets the browser handle the responsive layout without needing several media queries.

What does minmax() mean in CSS Grid?

minmax() defines a minimum and maximum size for a grid track.

For example:

minmax(250px, 1fr)

means:

The column should never become narrower than 250px, but it can expand to use available space.

This is one of the reasons CSS Grid works so well for responsive designs.

Instead of saying:

“At exactly 768px, switch from three columns to two.”

you can sometimes let the available space determine the layout naturally.

auto-fit vs. auto-fill

You may see both used in responsive Grid layouts:

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

and:

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

They behave similarly when enough items exist to fill the available space, but there is an important difference when empty tracks remain.

auto-fill continues reserving space for tracks that could fit.

auto-fit collapses unused tracks and allows the existing items to expand into that space.

For many responsive card layouts, auto-fit produces the behavior designers expect.

How do you control rows in CSS Grid?

Columns are controlled with:

grid-template-columns

Rows can be explicitly controlled with:

grid-template-rows

For example:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 300px;
}

This creates two columns and two explicitly sized rows.

In many real-world layouts, however, rows can simply grow based on the content inside them.

How do you make a grid item span multiple columns?

Grid items do not have to stay inside one column.

For example:

.featured {
    grid-column: span 2;
}

This tells the item to span two columns.

You can also position items using grid lines:

.featured {
    grid-column: 1 / 4;
}

This places the item from grid line 1 through grid line 4, meaning it spans three columns.

That makes it possible to create layouts such as:

Featured content       | Item
Item       | Item       | Item

without creating separate nested layouts for every row.

What is grid-template-areas?

CSS Grid can also name areas within a layout.

For example:

.page {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

Then assign elements to those areas:

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

This can make complex layouts easier to understand because the CSS visually describes the page structure.

CSS Grid vs. Flexbox

CSS Grid and Flexbox are not competing technologies.

They solve different layout problems.

CSS Grid is primarily two-dimensional

Grid is designed to control rows and columns together.

It works particularly well for:

  • Card grids
  • Galleries
  • Page layouts
  • Portfolio grids
  • Service sections
  • Product listings
  • Blog archives
  • Complex responsive sections

Flexbox is primarily one-dimensional

Flexbox is generally best when the main concern is arranging items along one primary axis.

It works particularly well for:

  • Navigation menus
  • Button groups
  • Horizontal icon rows
  • Vertically aligning content
  • Small component layouts

A website can use both.

You might use CSS Grid to create a three-column service section and Flexbox inside each service card to align the icon, heading, text, and button.

When should you use display: grid?

CSS Grid is a strong choice when the content needs a clear relationship across both columns and rows.

Common examples include:

Service cards

Service | Service | Service
Service | Service | Service

Blog archives

Post | Post | Post
Post | Post | Post

Team members

Person | Person | Person | Person

Portfolio items

Project | Project
Project | Project

Main content and sidebar layouts

Sidebar | Main content

It is particularly useful when items should remain aligned with one another even if their content lengths differ.

Does CSS Grid replace media queries?

Not completely.

Patterns like:

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

can remove the need for some breakpoint-specific layout changes.

But media queries are still useful when the design itself needs to change significantly.

For example, on mobile you might want to:

  • Change alignment
  • Reduce padding
  • Change typography
  • Hide decorative elements
  • Change item order
  • Modify navigation behavior

CSS Grid makes responsive layouts easier. It does not eliminate responsive design decisions.

Does display: grid affect every element inside the container?

Only the direct children become grid items.

For example:

<div class="grid">
    <div class="card">
        <h2>Heading</h2>
        <p>Text</p>
    </div>
</div>

If .grid uses:

.grid {
    display: grid;
}

.card is a grid item.

The heading and paragraph inside .card do not automatically become items in the outer grid because they are not direct children of .grid.

You can, however, make .card its own grid or flex container.

.card {
    display: grid;
    gap: 10px;
}

Grid layouts can therefore be nested when needed.

Does CSS Grid work with Elementor?

Yes.

Elementor layouts ultimately render HTML and CSS in the browser, so CSS Grid can be used in Elementor-based websites as well.

Elementor’s newer Atomic architecture has also been expanding native Grid capabilities, making CSS Grid increasingly relevant to visual WordPress development.

Even when a visual editor handles the controls, understanding what display: grid actually does makes it much easier to troubleshoot layouts and make better decisions about when Grid should be used.

Common CSS Grid mistakes

Forgetting to define columns

This:

.container {
    display: grid;
}

creates a grid container, but it does not automatically create a multi-column layout.

You still need something like:

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

if you want three columns.

Making minimum widths too large

This:

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

may cause problems on smaller screens because each item wants at least 500px.

Choose minimum values that make sense for the available viewport.

Overcomplicating a simple layout

Not every row needs Grid.

If you simply need three buttons next to each other, Flexbox may be easier.

Use the layout system that best matches the problem.

Forgetting about content size

Long words, large images, fixed widths, or child elements with their own minimum sizes can cause Grid items to overflow.

The grid itself may be configured correctly while something inside a grid item is forcing it to become wider than expected.

A practical responsive Grid example

For a basic website card grid, you can start with:

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

HTML:

<div class="card-grid">
    <article class="card">Card one</article>
    <article class="card">Card two</article>
    <article class="card">Card three</article>
    <article class="card">Card four</article>
</div>

That one rule gives you a flexible grid that can adapt its column count as the available width changes.

You can then style the cards separately without changing the layout logic.

Conclusion

display: grid turns an element into a CSS Grid container and gives you control over how its direct children are arranged across rows and columns.

For a basic grid, the core pattern is often as simple as:

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

For responsive layouts, functions such as repeat(), minmax(), and auto-fit make Grid considerably more powerful.

The important part is not using Grid everywhere. It is recognizing when a design needs two-dimensional control and using the layout system that keeps the website clean, responsive, and maintainable.

If your website needs a stronger responsive layout or a cleaner technical foundation, Envision Media Group is a web design company in New Jersey building custom websites around usability, performance, and long-term maintainability.

Sources

Picture of Cooper Kelly

Cooper Kelly

Cooper Kelly is the founder of Envision Media Group, a New Jersey-based web design and SEO company focused on helping businesses build stronger websites and improve their visibility in search. Since founding Envision in 2022, Cooper has worked hands-on across website strategy, design, technical SEO, content, and digital growth, with a focus on practical work that produces measurable results for clients.

Meet Cooper