Grid Column Span

Below, utility classes to apply grid-column, grid-column-start or grid-column-end property.

@for $value from 0 through 12

Class	Properties
.column-auto	grid-column: auto;
.column-start-auto	grid-column-start: auto;
.column-end-auto	grid-column-end: auto;
.column-<value>	grid-column: span $value / span $value;
.column-start-<value>	grid-column-start: $value;
.column-end-<value>	grid-column-end: $value;

Example(s)

1

2

3

4

5

<div class="grid grid-columns-3 flow-row gap-2 ...">
  <div class="w-1/1 h-12 ...">1</div>
  <div class="w-1/1 h-12 column-2 ...">2</div>
  <div class="w-1/1 h-12 column-3 ...">3</div>
  <div class="w-1/1 h-12 column-2 ...">4</div>
  <div class="w-1/1 h-12 ...">5</div>
</div>

Media Queries

grid-column, grid-column-start and grid-column-end are supported by changing state on-the-fly! You can use it like this:

<div class="small:column-4 medium:column-6 large:column-8">...</div>