World of CSS Grid

World of CSS Grid
By Elad Shechter
https://www.facebook.com/groups/css.masters.israel/

Advantages of CSS Grid
● Layouting with CSS, real freedom
to achieve any structure layout
with CSS only, like it should be.
(HTML div tag container is
unnecessary with CSS grid)

Advantages of CSS Grid
● Has the advantages of flexbox, and can work in 2 dimension
very easily.

Grid terminology
● Grid Container
● Grid Item
● Grid Line
● Grid Cell
● Grid Track
● Grid Area
● Grid Gap

Grid Container
<div class=”site”>
<header class=”child”></header>
<main class=”child”></main>
<aside class=”child”>
<div class=”child-of-child”></div>

</aside>
<footer class=”child”></footer>
</div>
CSS
.site{
display:grid;
}

Grid Item
Any element that is a direct
descendant of the grid.
<header class=”child”></header>
<main class=”child”></main>
<aside class=”child”>
<div class=”child-of-child”></div>

</aside>
<footer class=”child”></footer>
</div>

Grid Line
The horizontal and vertical lines
that make up the grid.

Grid Cell
The space between four grid lines

Grid Track
The space between two grid lines,
horizontal or vertical.

Grid Area
The area between four grid lines

Grid Gap
Empty space between grid tracks
grid-column-gap:10px;
grid-row-gap:10px;
=
grid-gap:10px;

Grid-Template
.site{
display:grid;
grid-template-columns: 2fr 1fr 1fr;
}
Grid-template-columns:
Will determine how many columns in a
row, and the proportion between those
columns.

Grid-Template
.site{
display:grid;
grid-template-rows: auto 1fr 3fr;
}
Grid-template-rows:
Will determine how many rows and the
proportion between those rows.

What is the fraction unit (fr) ?
● The same as you have in flexbox flex: ‘integer’ ; is for proportion between cells
or rows.

Base method
Basic method we only defined the columns in a row.
The grid items automatically populate grid from top left
to bottom right based on HTML source order, and
adding rows if needed according the first columns row.
.site{
display:grid;
}
<header class=”mastheader”></header>
<h1 class=”page-title”></h1>
<main class=”main-content”></main>
<aside class=”sidebar”></aside>
<footer class=”footer”></footer>
</div>
Example:
https://codepen.io/elad2412/pen/JrLeMG

Before we continue
Say hello to the
repeat function
grid-template-columns:1fr 1fr 1fr;
=
grid-template-columns:repeat(3 , 1fr);

List Method
Using the “base method”and the
“repeat function” we can easily
achieve list sequence of items. (easy
to define for every responsive break points the
amount of item in a row)
.site{
display:grid;
grid-template-columns: repeat(3, 1fr);
}
<ul class=”common-list”>
<li class=”common-list-item”>1</li>
…
</ul>
Example:
https://codepen.io/elad2412/pen/rGdomM

Positioning Method
Position grid item according the grid lines.
.site{
display:grid;
grid-template-rows:auto 1fr 3fr;
}
.masthead{
grid-column:2/4;
grid-row:2/3;
}
same as:
.masthead{
grid-column-start:2;
grid-column-end:4;
grid-row-start:2;
grid-row-end:3;
}
Example:
https://codepen.io/elad2412/pen/mBxagg

Positioning Method
More syntax options
grid-row:2/3;
=
grid-row:2; /*will take on cell*/
grid-column:2/4;
=
grid-column:2/span 2; /*will take 2 cell;
Example:
https://codepen.io/elad2412/pen/mBxagg

Areas Method
Positioning grid items according grid map.
<div class="site">
<header class="mastheader">main header</header>
<h1 class="page-title">page title</h1>
<main class="main-content">MAIN CONTENT</main>
<aside class="sidebar">sidebar</aside>
<footer class="footer">main footer</footer>
</div>
.site{
display:grid;
grid-template-columns:2fr 1fr; grid-gap:10px;
grid-template-areas:"header header"
"title sidebar"
"main sidebar"
"footer footer";
}
.mastheader{background:#b46ae3; grid-area:header;}
.page-title{background:#51a7fa; grid-area:title;}
.main-content{
background:#70bf40; grid-area:main; min-height:500px;
}
.sidebar{background:#f49018; grid-area:sidebar;}
.footer{background:#0265c0; grid-area:footer;}
Example: https://codepen.io/elad2412/pen/boMRaL

Areas Method
Saving EMPTY space with dot(.)
.site{
display:grid;
Grid-template-columns:1fr 1fr 1fr; grid-gap:10px;
grid-template-areas:"header header header"
"title . sidebar"
"main main sidebar"
"footer footer footer";
}
Example: https://codepen.io/elad2412/pen/GMdxrN

grid-auto-flow
The default flow (direction) of a grid is row, It means if there isn’t more space the
left item will drop to new row. But like every definition it is changeable.
.site{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(3,1fr);
grid-auto-flow:column;
}

Grid Units
Beside the fr unit, you can use every unit, like pixels, percents.
grid-template-columns: 70% 30%;
=
grid-template-columns:7fr 3fr;
=
grid-template-columns:2.33fr 1fr;

Grid Units - Auto Unit
Auto unit - will take what lefts from the container.
grid-template-columns: 200px auto 200px;

grid-auto-rows/columns & minmax function
When columns or rows aren't declared you can use this property to declare fix
height/width to undeclared columns or rows, or use the new minmax function.

MinMax Function
The minmax() function accepts 2 arguments: the first is
the minimum size of the track and the second the
maximum size. Alongside length values, the values can
also be auto, which allows the track to grow/stretch based
on the size of the content.
.site{
display:grid; height:100%;
grid-template-columns:1fr 1fr 1fr;
grid-auto-rows:minmax(100px,auto);
grid-gap:10px;
}
Minimum height of 100px
Example:
https://codepen.io/elad2412/pen/MEGQBr

Carousel with Grid ?
grid-auto-flow:column; without rows is the nowrap of grid.
.site{
display:grid;
grid-auto-flow:column;
}
<div class="site">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Example:
https://codepen.io/elad2412/pen/YrLErW

Naming Grid Lines
Grid lines can be named when defining the grid with the grid-template-rows and grid-template-columns
properties. Line names can then be referenced to position grid items.
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

Naming Grid Lines - Multiple Names
Multiple names can be assigned to grid lines by adding names within square brackets and separating each with a whitespace.
Each line name can then be referenced when positioning grid items by line names.
grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

Naming Grid Lines - Positioning Items by Line Names
grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;

Overlapping Grid items
Grid items can be layered/stacked by properly positioning them and assigning z-index when necessary.
Example: https://codepen.io/elad2412/pen/yzjjyd

Remember flexbox aligning?
Justify-items, justify-self, align-items, align-self, justify-content, align-content….
All this rules are applying in CSS Grid and you can use them here.
You can learn them from my presentation of world of flexbox
https://www.slideshare.net/eladsc/world-of-flexbox
Or from this awesome website
http://learncssgrid.com/#aligning-grid-items
Order property of flexbox is working too.

Support
Full support without prefix, almost in all browsers, edge will support it in the next
version of edge.
Old IE and old edge support it, in the older version.
(14/1/2018):

Bibliography
Videos:
● CSS Grid Changes EVERYTHING -
https://www.youtube.com/watch?v=7kVeCqQCxlk&index=1&list=PL8rji95IPUUCcHS8_JCAVDpuX4-fuNrtG
● CSS Grid Layout Crash Course - https://www.youtube.com/watch?v=jV8B24rSN5o
● CSS Grid terminology (Lynda.com) -
https://www.lynda.com/CSS-tutorials/CSS-grid-terminology/422835/477279-4.html
Websites:
● http://learncssgrid.com
● https://css-tricks.com/snippets/css/complete-guide-grid/
● https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
● https://www.w3.org/TR/css-grid-1/

World of CSS Grid

In this document

More Related Content

What's hot

Similar to World of CSS Grid

Recently uploaded

World of CSS Grid