I originally took this course back in May 2017 but for some weird reason, never published my notes, which I found while attempting to empty my drafts. Decided to unleash them into the universe. Enjoy!
I originally thought I would design Akudo.Codes using the new CSS Grid features so I wanted to familiarize myself with it. I ended up not using it but I hope to give it a spin soon!
In order to begin familiarizing myself with CSS grid, I thought I’d try the Grid Garden Game.
.mygrid {
grid-column-start: value;
grid-column-end: value;
grid-row-start: value;
grid-row-end: value;
}
/* These accept negative numbers for right to left configuration
They also accept a value of `span [number]` which allows you to span across that dimension.
The span value must always be positive, no negative numbers
*/
Shorthands:
grid-column: start-value/end-value;
grid-row: start-value/end-value;
Grid column and grid row can be used together to cover small or large portions of the page grid
There is also a shorthand for the grid-column & grid-row combinations: grid-area which accepts the four start and end values in this format:
#myGrid {
grid-area: 4/4/3/2;
}
//grid-row-start
//grid-column-start
//grid-row-end
//grid-column-end
When using positive numbers, the end value must not be the item area that you want to end at, but one over.
If a grid item is not explicitly placed, then it will be automatically placed according to the order added. The only way to override this default is using the order property.
To set the dimensions of the grid you can use the following properties:
- grid-template-columns: values;
- grid-template-rows: values;
Example:
#myGrid {
grid-template-columns: 50% 50%; // will render two columns with equal widths of 50%
grid-template-rows: 25% 25% 25% 25%; // will render 4 rows with equal heights of 25%
}
Another example:
#myGrid {
grid-template-columns: 50% 20% 20% 10%; // will render four columns with various widths
grid-template-rows: 25% 25% 25% 25%; // will render 4 rows with equal heights of 25%
}
Instead of constantly declaring the values this way, the CSS Grid spec includes a repeat function that allows you to shorten the syntax to:
#myGrid {
grid-template-columns: repeat(2, 50%); // this is identical to declaring grid-template-columns: 50% 50%;
}
CSS Grid introduces a new unit called the fractional, represented by fr. 1fr represents one share of the available space. So if you have two grid items with dimensions of 1fr and 2fr, that will render as 3 equal shares with the first grid item occupying just 1/3 and the second grid item occupying 2/3. When you mix other units with fr, the columns or rows set with fr will split up the remaining space based on the dimensions.
The shorthand for grid-template-columns and grid-template-rows is grid-template.
Those are my notes from completing the exercises. It does not cover every feature in the CSS Grid specification, but it does give me an idea of what it offers on a high level.