Align columns in CSS Grid

Question

Align columns in CSS Grid

89 Views Asked by DESSADER At 04 April 2025 at 20:39

Previously I used Flexbox to create a 12 column grid system. When implementing a similar system using CSS Grid, there was a problem with column alignment.

For example: there is a system of 12 columns and two elements that occupy 3 columns, which go one after another, when using Flexbox you can specify the justify-content: space-between to separate these columns on both sides of the container.

How to achieve the same behavior when using CSS Grid provided that the width of the columns is specified in fr and the number of columns occupied by the element is specified using the grid-column: span $number property?

It is not desirable to specify manually which column the element starts with in order to achieve an offset in this way (for example: starts with column 9 and ends with column 12).

I have attached a basic reproducible example.

Codesanbox

Original Q&A

There are 1 best solutions below

**Dan** · Answer 1

With how grid works, you will have to specify where each box starts, at least for your problem.

If you really don't want to specify the starting column, you can just create a grid with:

grid-template-columns: 3fr 6fr 3fr which is 3 + 6 + 3 = 12 columns

In your HTML, just add a third filler div in between your two boxes, so it can occupy the 6fr section in the grid.

UPDATE:

.container {
    width: 1000px;
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-template-columns: 3fr 6fr 3fr;
    border: 1px solid teal;
}

.box {
    color: #ffffff;
    background: teal;
    border-radius: 4px;
    padding: 10px;
}

.col-3-start {
    grid-column: span 3;
}

.col-3-end {
    grid-column: -4 / span 3;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>

<body>
  <div class="container">
    <div class="grid">
      <div class="box">Box 1</div>
      <div class="filler"></div>
      <div class="box">Box 2</div>
    </div>
  </div>
</body>

</html>

Align columns in CSS Grid

There are 1 best solutions below

Related Questions in CSS

Related Questions in GRID

Related Questions in ALIGNMENT

Related Questions in HORIZONTAL-ALIGNMENT

Trending Questions

Popular # Hahtags

Popular Questions