CSS Grid Vocabulary
In this case, the starting row goes before the (grid-row)
"/" and the ending row goes after it. Again, the ending row is exclusive; this grid item will occupy rows four and five.
example of grid on the back
.grid { border: 2px blue solid; width: 400px; height: 500px; display: grid; }
example of grid-gap on the back
.grid { display: grid; width: 320px; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; }
.item { grid-column: 4 / span 2; } What is this code the same as?
.item { grid-column-start: 4; grid-column-end: span 2; } .item { grid-column-start: span 2; grid-column-end: 6; }
Example of grid-row-start and grid-row-end comparing with grid-row
.item { grid-row-start: 4; grid-row-end: 6; } .item { grid-row: 4 / 6; }
if a grid has 5 rows, the grid row lines range from (grid-row)
1 to 6
Why is CSS grid useful?
CSS grid is most useful for two-dimensional layouts, providing many tools for aligning and moving elements across both rows and columns.
example of a grid and its items
Can't find a better one
.grid { display: grid; width: 100px; grid-template-columns: 20px 40% 60px; } What should we notice?
Notice that in this example, the total width of our columns (120 pixels) exceeds the width of the grid (100 pixels). This might make our grid cover other elements on the page! In a later exercise we will discuss how to avoid overflow.
How can we put space in our grid
The CSS properties grid-row-gap and grid-column-gap will put blank space between every row and column in the grid.
.grid { display: grid; width: 320px; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; } How wide are the columns?
The grid is 320 pixels wide and 20 of those pixels are taken up by the two grid gaps. Therefore each column takes a piece of the 300 available pixels. Each column gets 1fr, so the columns are evenly divided into thirds (or 100 pixels each).
It is important to note that grid-gap...
does not add space at the beginning or end of the grid.
The same rules from before apply; when using percentages to set rows...
each row will be a percentage of the grid's total height.
The properties that define the number of rows and columns in a grid can take a...
function as a value
How can we add both grid-row and grid-column together
grid-area
How can we put grid-start and grid-end but for columns.
grid-column-start, grid-column-end and grid-column
What if we wanted to use grid-row-start and grid-row-end at the same time.
grid-row property
What is the order for grid-area
grid-row-start grid-column-start grid-row-end grid-column-end (Each one separated by a slash)
How we can make single grid items take up multiple rows
grid-row-start and grid-row-end property
An element that covers rows 2, 3, and 4 should have these declarations: (grid-row)
grid-row-start: 2 grid-row-end: 5
How can we replace the grid-template-rows and grid-template-columns
grid-template property
How can we add a new column in CSS?
grid-template-columns property
grid-template-columns: repeat(3, 100px); What is this the same as?
grid-template-columns: 100px 100px 100px;
How can we create rows in CSS
grid-template-rows property
When an item spans multiple rows or columns using these properties
it will also include the grid-gap if any exists. For example, if an item spans two rows of height 100 pixels and there is a ten-pixel grid-gap, then the item will have a total height of 210 pixels.
Row grid lines and column grid lines start at what number
number 1
The value for grid-row-end should be
one greater than the row at which you want the grid item to end.
By default, how many columns does grids have
only 1
When using percentages in these two properties...
remember that rows are defined as a percentage of the grid's height, and columns are defined as a percentage of its width.
What function can we use in grids to duplicate rows or columns a certain number of times?
repeat function
Why is span useful?
span is a useful keyword, because it avoids off-by-one errors (miscalculating the ending grid line) you might make when determining the ending grid line of an element.
If a grid has 8 rows (grid-row)
the grid row lines range from 1 to 9
Finally, there is a CSS property grid-gap that can set...
the row and column gap at the same time.
The value for grid-row-start should be
the row at which you want the grid item to begin
When using grid-template the values after the slash
the size of each column
When using grid-template, the values before the slash will determine
the size of each row
Columns are still a percentage of what?
the total width.
What does the span do in CSS grid. (grid-column/grid-row)
we can use the keyword span to start or end a column or row relative to its other end.
What does this code do? grid-gap: 20px 10px;
will set the distance between rows to 20 pixels and the distance between columns to 10 pixels.
Does both properties has to be positive values?
No, Both properties can also each have negative values.
Is grid-template-columns and grid-template-rows are totally separate things
No, they are almost identical but name.
What does this example do? .item { grid-area: 2 / 3 / 4 / span 5; }
In the above example, the item will occupy rows two and three and columns three through eight. Using grid-area is an easy way to place items exactly where you want them in a grid.
.grid { display: grid; width: 300px; grid-template-columns: repeat(3, 100px); } What does this code do?
In the example above, using the repeat function will make the grid have three columns that are each 100 pixels wide.
.grid { display: grid; width: 320px; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; } What does this code do?
In the example code, our grid will have three columns with two ten-pixel gaps between them.
.item { grid-row-start: 1; grid-row-end: 3; } What does this code do?
In this example, the HTML element of class item will take up two rows in the grid, rows 1 and 2. The values that grid-row-start and grid-row-end accept are grid lines.
.grid { display: grid; grid-template-columns: 100px minmax(100px, 500px) 100px; } What does this example do?
In this example, the first and third columns will always be 100 pixels wide, no matter the size of the grid. The second column, however, will vary in size as the overall grid resizes. The second column will always be between 100 and 500 pixels wide.
.grid { display: grid; width: 1000px; height: 500px; grid-template-columns: 100px 200px; grid-template-rows: 10% 20% 600px; } What does this code do?
In this example, the first row is 50 pixels tall (10% of 500), the second row is 100 pixels tall (20% of 500), and the third row is 600 pixels tall.
.grid { display: grid; width: 1000px; grid-template-columns: 20% 50%; } What does this code do?
In this example, the grid is 1000 pixels wide. Therefore, the first column will be 200 pixels wide because it is set to be 20% of the grid's width. The second column will be 500 pixels wide.
.grid { display: grid; width: 1000px; height: 500px; grid-template: 200px 300px / 20% 10% 70%; } What does this code show?
In this example, we've made two rows and three columns of varying sizes.
Finally, the second parameter of repeat() can have how many multiple values?
It can have many multiple values
What does grid-template-rows defines
It defines the number of rows and sets each row's height.
Where does the grid property go if you want to start and end something? For example (grid-row-start, grid-columns-end).
It goes inside the item grid.
Is it possible for the value of grid-row-start to be greater than that of grid-row-end?
It is possible for the value of grid-row-start to be greater than that of grid-row-end.
What does fr do?
It would split your grid in equal rows
repeat(5, 1fr) What does this example do?
It would split your table into five equal rows or columns.
How can you resize your grid? For example, if you have a 100-pixel wide image in your grid, you probably don't want its column to get thinner than 100 pixels.
The minmax() function
grid-template-columns: repeat(2, 20px 50px) What does this code do?
This code will create four columns where the first and third columns will be 20 pixels wide and the second and fourth will be 50 pixels wide.
.item { grid-column: 4 / span 2; } What does this code do?
This is telling the item element to begin in column four and take up two columns of space. So item would occupy columns four and five.
What does this code do? .grid { display: grid; width: 500px; grid-template-columns: 100px 200px; }
This property creates two changes. First, it defines the number of columns in the grid; in this case, there are two. Second, it sets the width of each column. The first column will be 100 pixels wide and the second column will be 200 pixels wide.
Can we change the look of our grid
Yes
Is grid-column-start, grid-column-end and grid-column acts identically to grid-row-start, grid-row-end and grid-row
Yes, they work identically
Can we also define the size of our columns as a percentage of the entire grid's width.
Yes, we can also define the size with percentage
Can we also mix and match the two units
Yes, we can mix and match the two units
To turn an HTML element into a grid container, you must set what?
You must set the element's display property to grid (for a block-level grid) or inline-grid (for an inline grid). Then, you can assign other properties to lay out the grid.
To set up a grid, you need to have what?
a grid container and grid items
The grid container will be what?
a parent element that contains grid items as children and applies overarching styling and positioning to them.
Row grid lines and column grid lines ends at what value
anything that is greater than 1
