Grid
Hola, I am learning grid from mozilla docs. I am confused about this:
Now the <header> and <footer> are set to 1 / 3, which means to start at line 1 and ends at line 3.What does it mean that we are starting at line 1 and ending at line 3, for me line == column? I defined only 2 colums 1fr 3fr, how can they use 1 / 3 which means going from 1st column to third column
43 Replies
MDN Web Docs
CSS grid layout - Learn web development | MDN
CSS grid layout is a two-dimensional layout system for the web. It lets you organize content into rows and columns and offers many features to simplify the creation of complex layouts. This article will explain all you need to know to get started with grid layout.
a "line" is a row
Does 1 / 3 means that even though there are 2 colums i.e. 1fr and 3fr, it will automatically make 3 columns in it
ehh
a row ocupies multiple columns
for me line == column?
this is wrong
best way to learn this is open dev tools and use the grid highlight
how is header going from line 1 to 3 here
doesnt look like a row
to me
Best way to write that is grid areas not lines
🥲
im using that
below the article
but i dont undertand this
it goes from column 1 to column 2, but ends before column 3
Why not use it here then?
thanks for the tip
mhm
currently using it
but i want to understand this property
if you look at this grid, those numbers represent the lines between the grid cells. That's a 3x3 grid, and 1 / 3 runs from 1 on the left to 3 on the right
problem is i have only 2 columns
ya so much easier to see witch grid tools
in the screenshot*
yes but two columns makes 3 tracks
if there were 3
i would understand
lets use "tracks" instead of lines too EPic
then just pretend the third column isn't there. Three columns make for 4 lines, two columns make for 3 lines
mhmm
it kinda makes sense
tracks
one cell has a left border, and a right border. If you have two cells, there's a left, a middle, and a right.
not lines xD
mhmm
kinda understand
thank you
i wont use this proprty much so i think i have enoguh undertanding
use it all over
Grid ❤️
that property is the shorthand for
grid-column-start and grid-column-endI prefer using named areas personally
oh okay
i wonder why we cant use 1/2
you can
you can
but you're saying to start at 1 and end before 2
jinx
so, it's the same column
1 / 2 just means the first cell. The numbers refer to the tracks, not the colmns
nothing changes
and one column has two tracks
one on the left, one on the right
it might help to draw a 2x2 grid on a piece of paper. You end up drawing three vertical lines and three horizontal, but end up with two columns and two rows
you just number the lines left to right for the grid-column property's value. And yes, it's honestly not the best name for the property, because it's called column but refers the tracks.
just think that it defines what the column is rather than which column it is
same with row
and yes you can assign more on the child and it will make more cols/rows with auto
in short, your are starting from track 1 and it goes until track 3
thank you everyone!