This is good for 2D Layouts or websites that have different sections.
Flexbox VS Grid. Flexbox is good for aligning something on a 1D line. Grid is good for laying something out on a 2D grid or layout. There are some times where these tools might be better than another, or where both of these things can be implemented on a single page.
A 1D grid layout will be different than a flexbox layout. This happens most with the spacing between each element on the page.
You can combine flexbox with grids and grids with flexboxes to create a layout that you would like (they each have their own use cases).
styles.css
.container{
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap:10px;
}
The p elements will be the blocks.
Default behavior will try to take up the whole width of the screen, so it might be good to define the width of the container.
fr -> If we say 1fr 2fr, then we want the second column to be twice as large as the first one (1:2). This is the ratio of the page.
An important thing to decide is how we want to size our grid to fit our columns and rows.
Grid-template-column/grid-template-rows -> We can define rows and columns of a grid using px, rem, or fr. Using REM or PX for the grid means that the grid will not be responsive. Using fr fits the grid to the screen.
Grid-template: rows/columns -> We may also define both the rows and the columns of a grid using grid-template: rows / columns
Auto -> We may also define rows and columns using the auto keyword. Columns will respond to the width of the screen (attempts to go to 100%). Rows will respond to the height of the content.
fr -> used to divide the grid into ratios. if someone wrote 1fr 2 fr, the ratio of the columns would be 1:2. This grows and shrinks depending on the screensize, and the content width.
minmax(min,max) -> used to define the min and max width that we want a column to be. Setting a min size means that this is as small as the column will get.
repeat(times, size) -> used when we want to repeat something. We want to define repetition easily.
items are laid out in a F layout. Anything that is added after we have defined our rows and columns, then css will try to adjust for the new item
grid-auto-rows -> when we create new rows, then this defines how new items are added to a grid.
We can use chrome developer tools to find out what is happening in our grid.
When opening the inspector on firefox, if you use the layout tab, it will allow you to see if css grid is in use.
Sizing test: Take Here
.grid-container { display:grid; grid-template-columns:auto 400px minmax(200px, 500px); grid-template-rows:1fr 1fr 2fr; grid-auto-rows:50px; }
container/grid container -> Contains items.
griditems/ ->
tracks -> These are rows and columns that we make with grid-template-rows/columns
tracks form grid cells. Multiple cells can make a grid item.
Tracks are separeted by gridlines/gap
by default, items are laid out to unoccupied cells. One per cell.
grid-column -> grid-column:value ex grid-column:span 2 will make an item span two columns
grid-column-start:start
grid-column-end:ending -> if you specify a negative value , (-1), the rows are on the righthand most side.
We can start and end in whichever position we would like.
grid-column is short for grid-column-start and grid-column-end
grid-row -> grid-row-start/ grid-row-end
order -> each item has an order of 0 by default. By ordering the items, the greater they are, the farther into the grid they go.
grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end -> If we use this on an item, if we want the rest of the layout to act as expected, we need to lay out all the areas using the same property
We may overlay items atop another on grid.
Create a mondrian composition
You can have an easier time to visualize the number of rows and columns that you need inside of a container by drawing the prefered layout, then drawing the different boxes that you will need.