⬇️ The most important lesson of the day ⬇️
Save your code pen before you reload the page.
I started today's sesh intending to learn some kind of dependable CSS grid system I can rely on for layouts.
I finished having achieved my goal and gained a little more knowledge on CSS selectors, a topic I've been meaning to delve into for a while.
CSS Selectors
.grid > div { background:green; }
This means direct children and only direct children of .grid div which are div's themselves, get a green background.<div class="grid"><div><div> The last div is not getting the background applied.
p .green { colr:green; }
In this case paragraphs with the class of .green have a text colour of green.
.grid, div { color:green; }
Here, the types of the element with the .grid class and all the div's on the page share the same set of characteristics in this case having a text color of green. If the .grid class may be applied to a div in both cases, the text will be green.
On to CSS grids
I'm starting with the CSS Grid Layout Module which is a bit like tables as in it offers a grid-based layout system, using rows and columns, this makes designing web pages easier as I won't have to floats and positioning.
It uses some alien-looking declarations but nothing too complex.
It's fairly simple to get to grips with too.
For the div I want to act as a container, in CSS I need to add declaration to it's CSS.display:grid;
This tells the browser that all direct descendants divs within this div are in grid format.
For each of the divs that are descendants, I need to define a style that allows that element to be mapped to the grid.decendent1{grid-area:head;}
How the grid is laid out depends on another declaration in the div that acts as a container.grid-template-areas: 'head head head';
In the HTML I only need 1 div as a descendent to be the header area.
The reason I am declaring head 3 times is because I am forward planning and expecting that my overall layout is going to work across 3 columns.
This feels a lot like working with table layouts so far, but not as ugly.grid-template-areas: 'head head head head head';
The above would also work if I wanted my design to work across 5 columns or 20% width segments.
Then for every row below, I need to continue mapping with the number of columns in mind.
BTW, in a case where you need to position an unnamed div you can represent it with a period.
Lets say I have a 5 column layout and a 3 column header. But my next descendent div is not mapped. I would represent it with 2 periods to get it to span the remaining columns.grid-template-areas: 'head head head . .';
But this will not span.
It's important to note that the above accounts for 5 slots but the undefined div only spans across 1 slot.
The 1st period represents that undefined div.
The 2nd period acknowledges that final unfilled slot.
If periods are not used and you have div's that have no mapping declaration the div will be displayed after all the div's that do have mapping declarations on them.
In my Code Pen embed you will see that I have a 5 collum layout.
The top row of my grid is 5 parts represented as a whole as is the bottom row.
The middle row however is 5 parts represented over 3 parts. 1 single part and 2 double parts.
One problem with this method however is grids which have many columns or many rows.
Coming back and editing would be a pain and not so easy to read.
This is where additional directives come in.
These include rows, the ability to span columns or even rows.
Grids are not the only method of laying out page designs with CSS.
The next CSS grid topic is Flexbox.
But that will be a post for another day.