1

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

DESSADER
  • 49
  • 3

1 Answers1

0

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>
Dan
  • 104
  • 7
  • 1
    Thanks for your reply! Thank you for your answer! Unfortunately, this option is not quite suitable, because you need to operate with a clear number of columns, instead of using `auto-fit`, as well as clearly regulate the number of columns that an element occupies in the grid (`grid-span`). I haven't found a solution to this problem yet. Perhaps you know something. – DESSADER Dec 16 '22 at 12:40
  • You mentioned that you originally created this using flex-box. Can you provide a basic example of that? Thanks! – Dan Dec 16 '22 at 17:17
  • Hello, Dan! I was a little late in replying. I updated the question and attached a link to Codesanbox, where I added all the examples with descriptions. [View example](https://codesandbox.io/s/laughing-browser-pgjpjg?file=/index.html) – DESSADER Dec 22 '22 at 20:50
  • @DESSADER my answer was updated, do you mind checking the new solution? – Dan Dec 23 '22 at 08:29
  • Thanks for the update on your response! Familiarized myself with the example, unfortunately it's not what I need. Perhaps I should reconsider the implementation or use a different approach, as I haven't found a solution. – DESSADER Dec 25 '22 at 01:07