CSS: Grid Essentials and Advanced Grid

grid-column-gap AND grid-row-gap

Adds space in between the grid rows and columns. .grid { display: grid; width: 320px; grid-template-columns: repeat(3, 1fr); grid-row-gap: 50px grid-column-gap: 10px; } You can also just say grid-gap: 50px 10px; (rows, columns)

minmax

CSS property that prevents a grid box from getting too big or too small based on the size of your browser. .grid { display: grid; grid-template-columns: 100px minmax(100px, 500px) 100px; } The first and third columns will resize, but the second will expand and contract from 500px to 100px

grid-template: 200px 300px / 20% 10% 70%;

Can replace grid-template-columns and grid-template-rows Width/height defined by % or px Size of Rows / Size of Columns

grid-template-rows: 10% 20% 600px;

Creates rows in the grid template model; can be defined in width using % or px

Implicit versus Explicit Grid

Explicit grid is static. Implicit Grid is as follows: items fill up rows first, adding new rows as necessary. New grid rows will only be tall enough to contain the content within them. Use for when you're not sure how much content you'll end up showing.

justify-items: center;

If each grid item does not have a specified width of px within the columns/rows, it will only be as wide as necessary and be centered

align-items

Positions items along the block/inline axis. Accepts: 1. start — aligns grid items to the top side of the grid area 2. end — aligns grid items to the bottom side of the grid area 3. center — aligns grid items to the center of the grid area 4. stretch — stretches all items to fill the grid area

align-content

Positions items along the column axis Accepts: 1. start — aligns the grid to the top of the grid container 2. end — aligns the grid to the bottom of the grid container 3. center — centers the grid vertically in the grid container 4. stretch — stretches the grid items to increase the size of the grid to expand vertically across the container 5. space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element 6. space-between — includes an equal amount of space between grid items and no space at either end 7. space-evenly — places an even amount of space between grid items and at either end

Overlapping Elements

Powerful feature of the Grid Layout. You can overlap any part of the grid layout by have the grid-area = columns and rows that overlap with other elements. Then use the z-index to bring the overlapping element to the front.

grid-template-areas: "head head" "nav nav" "info services" "footer footer"; grid-template-rows: 300px 120px 800px 120px; grid-template-columns: 1fr 3fr;

Put into the .container element for the grid, this allows you to then put grid-area: head; (etc.) into individual internal elements which will plug each element into the grid per the "head head" layout. grid-area: head; would take up two columns

grid-auto-rows and grid-auto-columns

Specifies the height of implicitly added grid rows and columns. Accepts px, %, fr, and repeat() function. body { display: grid; grid: repeat(2, 100px) / repeat(2, 150px); grid-auto-rows: 50px; }

.item { grid-column: 4 / span 2; }

The "span" value allows an element/item on the grid to start on column 4 and span 2 columns.

Grid Layout in CSS

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

grid-auto-flow

grid-auto-flow specifies whether new elements should be added to rows or columns. grid-auto-flow accepts these values: 1. row — specifies the new elements should fill rows from left to right and create new rows when there are too many elements (default) 2. column — specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements 3. dense — this keyword invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added You can pair row and column with dense, like this: grid-auto-flow: row dense;

.grid { display: grid; width: 100px; grid-template-columns: 20px 40% 60px; }

grid-template-columns allows you to set the number of columns and define their width through either % or px

Justify Items

justify-items accepts these values: 1. start — aligns grid items to the left side of the grid area 2. end — aligns grid items to the right side of the grid area 3. center — aligns grid items to the center of the grid area 4. stretch — stretches all items to fill the grid area

grid-template-columns: repeat(3, 100px);

repeat() is a function specifically created for CSS grid model grid-template-columns: repeat(3, 100px); has the same meaning as: grid-template-columns: 100px 100px 100px; Multiple values mean first and third columns are 20px and second and fourth are 50px: grid-template-columns: repeat(2, 20px 50px)

justify-self and align-self

Modifies the item inside its own grid area for the inline/block row and the columns, respectively. Overrides the justify-item and align-item for any element that declares it.

.item { grid-row-start: 1; grid-row-end: 3; }

We can make single grid items take up multiple rows. Remember, we are no longer applying CSS to the outer grid container; we're adding CSS to the elements sitting inside the grid! The example will take up grid rows 1 and 2 grid and end before grid row 3. Can write as: grid-row: 1 / 3;

display: grid;

This defines that the grid model is being used

.item { grid-area: 2 / 3 / 4 / span 5; }

This is how grid-area will interpret those values. 1. grid-row-start 2. grid-column-start 3. grid-row-end 4. grid-column-end

Fraction Units

Used in Grid Model. We can define the size of columns and rows as a fraction of the grid's length and width. grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr; It is possible to use fr with other units as well. When this happens, each fr represents a fraction of the available space. grid-template-columns: 1fr 60px 1fr;

.item { grid-column-start: 1; grid-column-end: 3; }

We can make single grid items take up multiple columns. The example would start on column 1 and take up 2 columns. Can write as: grid-column: 1 / 3;

justify-content

We can use justify-content to position the entire grid along the row axis. 1. start — aligns the grid to the left side of the grid container 2. end — aligns the grid to the right side of the grid container 3. center — centers the grid horizontally in the grid container 4. stretch — stretches the grid items to increase the size of the grid to expand horizontally across the container 5. space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element 6. space-between — includes an equal amount of space between grid items and no space at either end 7. space-evenly — places an even amount of space between grid items and at either end