Kevin Powell - Community•10mo ago

I need to understand grid template rules

  
  <div id="container">
    
    <div class="banner"></div>
  </div>

  
  <div id="container">
    
    <div class="banner"></div>
  </div>

body {
  background-color: black
}

#container {
  display: grid;

  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/*   grid-auto-columns: 0.5fr; */
  grid-gap: 10px;
/*   height: 100%; */
  grid-auto-flow: row;
  background: white;
}


.banner {
  grid-area: 1 / 1 / 3 / 14;
  background-color: #dca4c8;
  
  box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -webkit-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -moz-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  
  border-radius: 0px 0px 21px 21px;
  -webkit-border-radius: 0px 0px 21px 21px;
  -moz-border-radius: 0px 0px 21px 21px;
}

body {
  background-color: black
}

#container {
  display: grid;

  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/*   grid-auto-columns: 0.5fr; */
  grid-gap: 10px;
/*   height: 100%; */
  grid-auto-flow: row;
  background: white;
}


.banner {
  grid-area: 1 / 1 / 3 / 14;
  background-color: #dca4c8;
  
  box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -webkit-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -moz-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  
  border-radius: 0px 0px 21px 21px;
  -webkit-border-radius: 0px 0px 21px 21px;
  -moz-border-radius: 0px 0px 21px 21px;
}

The container grid template only have 13 columns and on the banner grid area shows 14 instead of 13, but when I change it to 13, it does not spread to the full width of the page. so if I change it to 14 it will extend to the full length of the page, but why? and it does make sense since like i mentioned there is only 13 columns, pls help me understand this ty

10 Replies

MarkBoots•10mo ago

to assign a child to a grid area, the value you use are the 'grid-lines' not the cell itself. example: here you have 3 columns, but 4 lines (|) and 2 rows, but 3 lines ---

   1        2        3        4
1  +--------+--------+--------+
   | item 1 | item 2 | item 3 |
2  +--------+--------+--------+
   | item 4 | item 5 | item 6 |
3  +--------+--------+--------+

   1        2        3        4
1  +--------+--------+--------+
   | item 1 | item 2 | item 3 |
2  +--------+--------+--------+
   | item 4 | item 5 | item 6 |
3  +--------+--------+--------+

there is always 1 line more then the amount of colls/rows in this case the item 2 is placed at - grid-row-start: 1 - grid-col-start: 2 - grid-row-end: 2 - grid-col-end 3 so: grid-area: 1 / 2 / 2 / 3 off-topic tip: if you want multiple columns/rows of the same size. you can use the repeat() function. repeat(13, 1fr) I don't want to confuse you too much, but you can also use negative numbers for grid lines (these will be counted from the right and bottom).

   -4       -3       -2       -1
-3  +--------+--------+--------+
    | item 1 | item 2 | item 3 |
-2  +--------+--------+--------+
    | item 4 | item 5 | item 6 |
-1  +--------+--------+--------+

   -4       -3       -2       -1
-3  +--------+--------+--------+
    | item 1 | item 2 | item 3 |
-2  +--------+--------+--------+
    | item 4 | item 5 | item 6 |
-1  +--------+--------+--------+

because you can combine the positive and negative lines numbers, you can take advantage of that. For example, if you want to span an item from the first to the last column. you can do: 1 / -1 so your banner: grid-area: 1 / 1 / 3 / -1;

chrono1913OP•10mo ago

so to make it clear, if i were to write this

   1        2        3        4
1  +--------+--------+--------+
   | item 1 | item 2 | item 3 |
2  +--------+--------+--------+
   | item 4 | item 5 | item 6 |
3  +--------+--------+--------+

   1        2        3        4
1  +--------+--------+--------+
   | item 1 | item 2 | item 3 |
2  +--------+--------+--------+
   | item 4 | item 5 | item 6 |
3  +--------+--------+--------+

it would be grid-template: 1fr 1fr / 1fr 1fr 1fr and if i want to cover the whole top page, i would have to use

grid-area: 1 / 1 / 1 / 4( instead of 3)

grid-area: 1 / 1 / 1 / 4( instead of 3)

MarkBoots•10mo ago

the whole top row would be

grid-area: 1 / 1 / 2 / 4;

grid-area: 1 / 1 / 2 / 4;

(the first row ends at grid line 2) or

grid-area: 1 / 1 / 2 / -1;

grid-area: 1 / 1 / 2 / -1;

(-1 is the first grid line from the right, effectively the last) but you can also divide the grid-area in grid-row and grid-column

grid-row: 1; /* you don't need to specify the end (2) if it is only 1 row */
grid-column: 1 / -1; /* first to last */

grid-row: 1; /* you don't need to specify the end (2) if it is only 1 row */
grid-column: 1 / -1; /* first to last */

maybe this is more clear in the usage

chrono1913OP•10mo ago

tahnks for the help also i want to ask is there a way that I can use anotehr css grid-template in another css file

Rägnar O'ock•10mo ago

Keep in mind that if you need to affect a lot of elements you should use grid-template-area

chrono1913OP•10mo ago

you mean like

" area1 area1 area1"
  ". . . "

" area1 area1 area1"
  ". . . "

also my previous question, can i use a grid template from one css file to another css file

Rägnar O'ock•10mo ago

What do you mean?

chrono1913OP•10mo ago

like if i want o start another file but use the grid template that i already setup in another file can css do that

Rägnar O'ock•10mo ago

Css doesn't care about files, as long as everything is loaded in the browser on the page you want to use the stuff in, it works Maybe you should look up some more basic stuff about how css works before trying to use complex stuff like grid or flex or the like

chrono1913OP•10mo ago

its just some thought on my mid as i work on my projecxt but thanks

Gaming

Programming

I need to understand grid template rules