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

MarkBoots•2/12/24, 7:40 AM

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

there is always 1 line more then the amount of colls/rows

in this case the is placed at

grid-row-start: 1
grid-col-start: 2
grid-row-end: 2
grid-col-end 3
so:

off-topic tip: if you want multiple columns/rows of the same size. you can use the repeat() function.

MarkBoots•2/12/24, 7:57 AM

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).

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:

so your banner:

chrono1913OP•2/12/24, 9:26 AM

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

it would be grid-template: 1fr 1fr / 1fr 1fr 1fr

chrono1913OP•2/12/24, 9:28 AM

and if i want to cover the whole top page, i would have to use

MarkBoots•2/12/24, 12:04 PM

the whole top row would be

(the first row ends at grid line 2)

or

(-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

maybe this is more clear in the usage

chrono1913OP•2/14/24, 6:13 AM

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•2/14/24, 8:16 AM

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

chrono1913OP•2/14/24, 9:44 AM

you mean like

chrono1913OP•2/14/24, 9:46 AM

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

Rägnar O'ock•2/14/24, 10:03 AM

What do you mean?

chrono1913OP•2/14/24, 10:06 AM

if i want o start another file

chrono1913OP•2/14/24, 10:06 AM

but use the grid template that i already setup in another file

chrono1913OP•2/14/24, 10:06 AM

can css do that

Rägnar O'ock•2/14/24, 10:10 AM

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

Rägnar O'ock•2/14/24, 10:11 AM

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•2/14/24, 11:30 AM

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

chrono1913OP•2/14/24, 11:30 AM

but thanks