Can CSS Grid have offsets, like flexbox, in a single row of columns?

[Pickra]

Hey Rachel,

Thanks for hosting this AMA and giving back to the community. I think this is a repeat of #34, I saw 1 or 2 others that seemed similar. I hope it's ok I'm opening a new issue, I didn't see an answer.

Here is a codepen.

I'm using margin-left for CSS GRID offsets, the same way I am with flexbox. I know this is wrong, I was hoping you might have a better solution. I've also tried grid-column-start/end combos. I was going to try order next, but that seems like the wrong path.

.offset-#{$name} {
   margin-left: (100% / length($cols)) * $i;
}

I'm trying to duplicate a bootstrap(flexbox) grid with CSS Grid; 1 row of columns. I'm fairly confident that flexbox is the better solution, but I'm using this exercise to improve my understanding of CSS Grid.

[IOIIOOIO]

This article describes how to recreate a Bootstrap Grid with CSS Grid, it seems to omit offsets:

https://hacks.mozilla.org/2017/04/replace-bootstrap-layouts-with-css-grid/

The only way I could think of creating an offset is by specifying which column a grid-item should start at.

In your case, you're setting up a grid where you know how many columns there are.

So you could replace something like this:

<div class="col-6"></div> <div class="col-offset-3 col-3"></div>

with this:

<div class="col-6"></div> <div class="col-start-9 col-3"></div>

/* single use column layouts */
.col-3 {
  grid-column-start: span 3;
}
.col-6 {
  grid-column-start: span 6;
}
.col-start-9 {
     grid-column-start: 9;
}

/* but when the classes are combined */
.col-start-9.col-3 {
     grid-column: 9 / span 3;
}

It could end up with a lot of code to cater for all the different combinations, but perhaps you could make a Sass function to spit that out for you.

I haven't tested this out but let me know how it goes if you use it.

[Pickra]

Thanks for your input @IOIIOOIO! I thought of that and came to the same conclusion. Was looking for something less verbose.

[stavros-liaskos]

@IOIIOOIO Thanks for the inspiration. Here I implemented a complete and responsive codepen which implements .row, .col-{sm, md, lg, xl} and .col-start-{1..12} classes

https://codepen.io/stavros-liaskos/pen/GGRjVZ?editors=1100

UPDATED: Ah! I forgot .container! Updated version implements also this class and some optimizations: as simple as possible

@Pickra

[Pickra]

Nice work @stavros-liaskos 👍

[IOIIOOIO]

@stavros-liaskos I just realised how awesome it is you recreated the Bootstrap grid in 40 lines of code. Plus I can customise the number of columns, gutter spacing and media queries in a snap. You could turn that into a web component.

[jbwharris]

Just in case anyone finds this, I forked @stavros-liaskos's work and made some refinements. I realized that it was was outputting a lot of unnecessary classes. So I added in an if statement that checked if the offset and column values exceeded 12, then output that line. I also noticed that when it did create the offset it would be off by a column, so say you wanted to offset by 6 columns, that would mean that the grid-column would need to start in column 7, not column 6. So I added a +1 to the grid-column calculation. As the original poster was looking to replicate Bootstrap functionality(like I wanted to), so I changed the name to offset- to match the Bootstrap class naming structure.

https://codepen.io/modsuperstar/pen/dBZKxv

[EdnaldoNeimeg]

@IOIIOOIO there is one problemas with your answer:

If you have a line above the line you are trying to apply the "offset" where the number of columns is the same (or less) the number of the "ofsset" then the two lines collapses into one line.