0

I am trying to replicate the .col class of bootstrap 4 in CSS Grid. i.e. make columns span evenly across 12 column row

I have used created a 12 column grid in the row class and used grid-column: span 12 as an example for the col-sm-12 class.

I would appreciate any help.

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr ) ;
    grid-gap: 20px;
}

.col {
    grid-column: span auto;
}
shetch
  • 1

1 Answers1

2

I am answering your question based on my own question with different problem -> The difference between percentage and fr units in CSS Grid Layout

:root {
  --grid-columns: 12;
  --column-gap: 10px;
  --row-gap: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-column-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
  justify-content: center;
}

[class*=l-] {
  border: 1px solid red;
}

.l-1 {
  grid-column-start: span 1;
}

.l-2 {
  grid-column-start: span 2;
}

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

.l-4 {
  grid-column-start: span 4;
}

.l-5 {
  grid-column-start: span 5;
}

.l-6 {
  grid-column-start: span 6;
}

.l-7 {
  grid-column-start: span 7;
}

.l-8 {
  grid-column-start: span 8;
}

.l-9 {
  grid-column-start: span 9;
}

.l-10 {
  grid-column-start: span 10;
}

.l-11 {
  grid-column-start: span 11;
}

.l-12 {
  grid-column-start: span 12;
}
<div class="grid">
  <div class="l-6">Column 1</div>
  <div class="l-6">Column 2</div>
  <div class="l-3">Column 3</div>
  <div class="l-4">Column 4</div>
  <div class="l-3">Column 5</div>
  <div class="l-2">Column 6</div>
  <div class="l-1">Column 7</div>
  <div class="l-10">Column 8</div>
  <div class="l-1">Column 9</div>
  <div class="l-5">Column 10</div>
  <div class="l-5">Column 11</div>
  <div class="l-2">Column 12</div>
</div>

I think it covers what you want to achieve or at least will give you an idea.

Morpheus
  • 8,829
  • 13
  • 51
  • 77
  • Thanks for your reply, but sadly it doesn't help me. The "col" class in bootstrap 4 spaces elements evenly so I was hoping for an equivalent "span auto" feature in css grid. – shetch May 20 '19 at 09:22
  • You can use flexbox and grid together both have their uses, I really doubt you will be able to achieve what you want with CSS grid alone. – Morpheus May 20 '19 at 14:28