Understanding Grid

Here is the playground: https://jsfiddle.net/4L7v8jhx/1/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

22 Replies

ah, it goes wrong with the pseudoselector. It is a bit tricky, put a pseudoselector works on the element itself, not childs. What you are doing with .container:first-child is looking for a .container that IS the first child of something else. what you need is .container > div:first-child so, the div that IS the first-child within a parent

rezabet•2y ago

Ohhh okay Thanks a bunch! So now, I just repeat with the rest of the div's? So the next one would look like:

.container > div:nth-of-type(2) {
  grid-column: 7 / 13;
}

.container > div:nth-of-type(2) {
  grid-column: 7 / 13;
}

And so on...

MarkBoots•2y ago

yes that is an option. but instead of defining the start and end, you could also just use span {number of cells} the start position is the first available spot, and it spans over that number example:

.container > div:nth-of-type(1),
.container > div:nth-of-type(2) {
  grid-column: span 6
}

.container > div:nth-of-type(1),
.container > div:nth-of-type(2) {
  grid-column: span 6
}

rezabet•2y ago

Aha, I see Yes, that seems more efficient since it's much less code

MarkBoots•2y ago

and if you want it even more reduced, you could even use css variables

<div class="container">
  <div style="--span: 6">This is column 1 of 2</div>
  <div style="--span: 6">This is another column 1 of 2</div>

  <div style="--span: 4">This is column 1 of 3</div>
  <div style="--span: 4">This is another column 1 of 3</div>
  <div style="--span: 4">This is yet another column 1 of 3</div>

  <div style="--span: 4">This is column 1 of 3</div>
  <div style="--span: 8">This is column 2 of 3</div>

  <div style="--span: 3">This is column 1 of 4</div>
  <div style="--span: 3">This is another column 1 of 4</div>
  <div style="--span: 3">This is yet another column 1 of 4</div>
  <div style="--span: 3">This is one more column 1 of 4</div>

  <div style="--span: 3">This is column 1 of 4</div>
  <div style="--span: 3">This is another column 1 of 4</div>
  <div style="--span: 6">This is column 2 of 4</div>
</div>

<div class="container">
  <div style="--span: 6">This is column 1 of 2</div>
  <div style="--span: 6">This is another column 1 of 2</div>

  <div style="--span: 4">This is column 1 of 3</div>
  <div style="--span: 4">This is another column 1 of 3</div>
  <div style="--span: 4">This is yet another column 1 of 3</div>

  <div style="--span: 4">This is column 1 of 3</div>
  <div style="--span: 8">This is column 2 of 3</div>

  <div style="--span: 3">This is column 1 of 4</div>
  <div style="--span: 3">This is another column 1 of 4</div>
  <div style="--span: 3">This is yet another column 1 of 4</div>
  <div style="--span: 3">This is one more column 1 of 4</div>

  <div style="--span: 3">This is column 1 of 4</div>
  <div style="--span: 3">This is another column 1 of 4</div>
  <div style="--span: 6">This is column 2 of 4</div>
</div>

.container {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(12, 1fr);
}

.container div {
  grid-column: span var(--span)
}

.container {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(12, 1fr);
}

.container div {
  grid-column: span var(--span)
}

rezabet•2y ago

Oh okay, great! Will attempt that Thanks! @MarkBoots 🙂

MarkBoots•2y ago

so here the span value is set inline as a variable, the div will get that value for the grid-column you're welcome. Good luck Grid is fun!

rezabet•2y ago

Thanks again! I agree! @MarkBoots I appreciate your help, I just got 1 more question. If I didn't want to have any inline styles and have everything in my CSS file instead, how would I manage that?

MarkBoots•2y ago

then your option with nth-child(n) and span {number} should work

rezabet•2y ago

I use SASS, so perhaps still use variables? Ah okay, thanks!

CodeNascher•2y ago

instead of nth-child i'd give my elements a class named after the amount of spans and then style those classes with the span custom prop from earlier no inline styles that way but same flexibility

rezabet•2y ago

That's smart too, I'll try that out, thanks!

MarkBoots•2y ago

yea, thats is an option too. (but if then, why not use custom props. then you don't have to define those classes)

rezabet•2y ago

I hope it's not a dumb q, but what's a custom prop?

CodeNascher•2y ago

css variable

MarkBoots•2y ago

a css variable

rezabet•2y ago

Ah okay

MarkBoots•2y ago

hopefully soon we can use attributes to calculate with (they are working on it). that would make it really great. you could do something like <div cell-span="3">

div{
  grid-column: span attr(cell-span)
}

div{
  grid-column: span attr(cell-span)
}

rezabet•2y ago

That's cool yeah

CodeNascher•2y ago

sounds interesting

MarkBoots•2y ago

now it reads attribute as a string. so its not possible. but we'll be able to define the type of the value (in this case a number) ohw, btw. you said scss you can use this loop. it will generate classes span-1 to span-12

.container {
  $columns: 12;
  
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat( #{$columns}, 1fr);
  
  @for $i from 1 through $columns {
    .span-#{$i} { 
      grid-column: span #{$i}
    }
  }
}

.container {
  $columns: 12;
  
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat( #{$columns}, 1fr);
  
  @for $i from 1 through $columns {
    .span-#{$i} { 
      grid-column: span #{$i}
    }
  }
}

CodeNascher•2y ago

ye, seems like the best solution, but i was too lazy to type all of that on my phone lol 😬

Gaming

Programming

Understanding Grid