Post by Geist on Nov 26, 2024 23:48:23 GMT
CSS Grid
A tool for 2D layouts - especially more complex layouts with multiple sections, and important for responsiveness.
Flexbox vs Grid:
Flexbox - a tool that helps you align content along a one dimensional line (the main axis, etc).
Grid - a tool for laying out content along a two dimensional grid (IE, things with sidebars, footers, etc.) Almost like a table structure.
You can utilize both of these tools, for example using a flex container inside of a grid container.
Grid will, when resized, create a grid. Flexbox will not line up easily, as it's first goal is to fit the content in an "optimal" box.
When creating a grid, your code will start like this:
.container {
display:grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr;
gap:10px;
}
"Fr" in this case being "fractional" in reference to the overall grid itself. In the above, we have two columns, one being larger than the other, and two rows of equal size.
We did a quick test to make a chessboard, which I did fine. Here's the CSS:
.container {
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
gap:0px;
width:800px;
}
.white {
background-color: antiquewhite;
height: 100px;
width: 100px;
}
.black {
background-color: burlywood;
height: 100px;
width: 100px;
}
Grid Sizing
If we started with a container that has 4 items with two rows and two columns of fixed size, it would not be responsive -- I'm assuming you could use a media query but... why.
You could use rem, but that also isn't responsive as it's relative to the HTML.
You can set a template up in a combined property (rows/columns):
.grid-container {
grid-template: 100px 100px / 200px 200px;
{
You can use 'auto' for some responsiveness. The grid will try and take up 100% of the viewport width. With rows, it won't try and take up 100% of the screens height, it will try to take all the content.
Ratios - this is how "fr" works, as a ratio. It defines the ratio of the rows and columns.
Min-Max :
.grid {
grid-template-columns: 200px minmax(400px,800px);
}
Makes it so that it will be a minimum of 400px and a max of 800px. It will not got larger or smaller than that.
Going back to the chess board, we annoyingly had to write '1fr' eight times. I really hoped there was an alternative, and there is!
Using repeat:
.grid {
grid-template-columns: repeat(2, 200px);
*/so two columns that are each 200px)
}
IF you don't have enough items to fill the grid you've created, it fill what it can and have an empty space. IF you don't define enough rows and columns, it'll add the extra div to the bottom and have an automatic size based on it's height. If you want to change this, you can use grid-auto-rows and grid-auto-columns to control the styling no matter how many items are in the grid.
Grid Item Placement
I'm guessing she'll bring up flexbox for this section.
Some definitions she's dropping:
Grid Container - a div that contains all of the items.
Grid items - items inside the containers
Tracks - rows and columns
Grid cell - Smallest unit in a grid, the intersection of the tracks.
Grid lines - Lines of the grid in-between the tracks. (the gap property)
Grid items - items inside the containers
Tracks - rows and columns
Grid cell - Smallest unit in a grid, the intersection of the tracks.
Grid lines - Lines of the grid in-between the tracks. (the gap property)
This sounds a lot like a general table with a lot of padding.
You can specify the last line in a grid using a negative value - counting from the right hand side. -1, rightmost, 1, leftmost. She doesn't recommend using lower negatives as they get confusing.
Admittedly I'm zoning out a little so I think I'll have problems with this later.
.grid-item {
grid-column: span 2;
\* this is actually shorthand for two properties:
grid-column-start:
grid-column-end:
This has a grid-row sister
You can use the order property to rearrange these items when they don't size the way you want to. It's a nice shorthand instead of column-start/end etc.
But there is a shorthand for that, which is grid-area:
.grid-item {
grid-area: 2 / 1 / 3 / 3 ;
\* row start, column start, row end, column end *\
If you're using grid-area on an item, you'll need to use it on all items.
The final thing she wants to show us is overlapping items on grids, which is something that I want to do because it can look neat.
And now it's time for our CSS Grid project - Mondrian painting. I know this guy! I wasn't able to do it on my own but after watching her solution I understood my problem -- we had fixed sizes and I attempted to use percentages. Other than that, I had it right.
We're going to bootstrap next, but she didn't mention how to make grid responsive... chat?
