Ideas about using CSS grid

[wiegertschouten]

Hello there.

CSS grid is great. It simplifies many things. It could also simplify the way the Bootstrap grid is built.

I'll just present a few ideas and list the benefits I see.

Rows

A .row could be defined as a dead simple grid container:

$column-count: 12;
$column-gutter: 1.5rem;

.row {
    display: grid;
    grid-template-columns: repeat($column-count, 1fr);
    gap: $column-gutter;
}

Benefits:

• No need for negative margins
• Defining the gutter on the .row instead of columns makes it very easy to make it responsive, or to remove it.

Columns

A .col-* would look like this:

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

Benefits:

• No need for padding/margin on columns
• No need to specify width (or any other styles) for columns
• It's also possible to make .cols span multiple rows with the grid-row property

Offset

So far, for end users, things will work roughly the same as with the current system. However, this cannot be the case for .offset-* classes. In the current system, the offset is relative to the previous column. When using CSS grid, this is not possible. The offset will always be relative to the .row as described above, and ignore any previous columns. So, the following:

.offset-4 {
    grid-column-start: 4;
}

will always try to put the column on offset 4. Benefit: columns positioned in this way will always keep their position, even when previous columns are not present or hidden. The major drawback is of course that this is different from what people have gotten used to.

I have created a gist with a working grid system based on the above. Its class names are a bit different from Bootstrap's (I found them more appropriate this way), and it may not be perfect, but I think it's good enough to get the idea.

Curious what you think.

[mdo]

Heyo! This is a great idea. Had a moment of inspiration based on this and some other sandboxing I’d done in the past. I’ve opened #31813 to start playing around.