CSS Grid

CSS Grid
T A B L E L A Y O U T 2 . 0

3
Table Layout Grid Frameworks

6
Grid Container
Grid Item Grid Item Grid Item
Grid Item Grid Item Grid Item

7
Grid Line
Grid Track
Grid Cell
Grid Area

1 0
grid-template-rows / grid-template-columns
Deﬁnes the columns and rows of the grid with a space separated list of value. Values represent track size and can be
a px length, percentage, or fraction of free space. Optional names can be given to the generated lines.
grid-template-columns: 40px 50px 1fr 2fr;
grid-column-gap / grid-row-gap
Deﬁnes the space between grid tracks.
grid-column-gap: 10px;
grid-row-gap: 15px;
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
Repeat and minmax functions can also be used for more complex layouts.
grid-template-rows: repeat(4, minmax(20px, 50px) 100px);

1 1
justify-items / align-items
Justify-items aligns a grid items on the row axis, align-items aligns items on the column axis, inside grid cells. Values
can be start, end, center, or stretch (default).
justify-self: start;
justify-self: center;
align-self: end;
align-self: stretch;
justify-content / align-content
Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid
items are sized with non-ﬂexible units like px. Justify-content will align the grid on the row axis and align-content will align
the grid on the column axis. Values can be start, end, center, stretch, space-around, space-between, space-evenly.
justify-content: start;
justify-content: center;
align-content: space-around;
align-content: space-evenly;

1 3
grid-column-start / grid-column-end / grid-row-start / grid-row-end
Determines a grid item’s location within the grid by referring to speciﬁc grid lines. Value can be a number or name
referring to a grid line, “span <number | name>” to span until speciﬁed line is hit, or auto.
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2
grid-row-end: span 2
justify-self / align-self
Justify-self aligns a grid item on the row axis, align-self aligns on the column axis.
Values can be start, end, center, or stretch (default).
justify-self: start;
justify-self: center;
align-self: end;
align-self: stretch;

1 5
grid-auto-ﬂow
If you have grid items that you don't explicitly place on the grid, the auto-placement algorithm kicks in to automatically
place the items. This property controls how the auto-placement algorithm works. It’s similar to ﬂex-direction but with
one special super power.
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;

1 7
grid-template-areas / grid-area
Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property.
Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax
itself provides a visualization of the structure of the grid.
.item-a { grid-area: header; }
.item-b { grid-area: main; }
.item-c { grid-area: sidebar; }
.item-d { grid-area: footer; }
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}

1 9
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
.container {
display: grid;
}

2 0
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
.container {
display: grid;
}
<div class="container">
<header class="header">Header</header>
<main class="main">Main</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>

2 1
Table Layout Grid Frameworks CSS Grid

2 4
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 30px;
max-width: 960px;
margin: 0 auto 30px;
}

2 5
.container {
grid-template-columns: 1fr 1fr;
"header header"
"main main”
“sidebar footer”;
@media (——medium-screen) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

2 9
“The main idea behind the flex layout is to give the container
the ability to alter its items’ width/height (and order) to best
fill the available space (mostly to accommodate to all kind of
display devices and screen sizes).”
— Chris Coyier

3 0
• Flex is one dimensional. Grid is two dimensional.
• A core difference is that Grid’s approach is layout-
first while Flexbox’ approach is content-first.
• If you want to define a layout as a row or a column, that
flexes based on the content inside, then you probably
need flexbox.
• If you want to define a grid and fit content into it in two
dimensions then you probably need grid.

3 2
Still use tables
…but for tables

CSS Grid

More Related Content

What's hot (20)

Similar to CSS Grid (20)

More from Digital Surgeons (20)

Recently uploaded (20)

CSS Grid