SlideShare ist ein Scribd-Unternehmen logo
1 von 116
Downloaden Sie, um offline zu lesen
CSS Grid Layout
Rachel Andrew
Topconf Linz, February 2016
Rachel Andrew
http://rachelandrew.co.uk
@rachelandrew
http://grabaperch.com
CSS in 2015 is amazing.
The trouble with CSS layout
• Floats and clearfix hacks
• Absolute positioning means elements are taken
out of document flow and risk overlaps
• Redundant markup and positioning oddities with
display: table
• White space issues with inline-block
https://www.flickr.com/photos/zervas/2810241612
Flexbox?
Seeing Flexbox as the silver bullet for
layout issues is likely to lead us down
another path of layout hacks.
The cost of taming layout methods
• Developer hours spent learning non-obvious
concepts.
• Compromises in terms of document semantics in
order to achieve responsive layouts.
• Needing to lean on frameworks to help with
complex math.
• Adding markup to create grids
• Using preprocessors to abstract layout hacks
We need a designed for purpose
layout system for the sites and
applications we develop today.
CSS Grid Layout
Our HTML consists of a
div with a class of
wrapper and two child
elements, a and b.
<div class="wrapper">
<div class="a">A</div>
<div class="b">B</div>
</div>
To create a grid we use a
new value of the display
property.
display: grid
.wrapper {
display: grid;
}
We describe the grid using
the new properties:
grid-template-columns
grid-template-rows
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: auto auto;
}
We position items using the
new properties:
grid-column-start

grid-column-end

grid-row-start

grid-row-end
.a {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
To position an item bottom
centre, I start at column
line 2 and end at column
line 3.
.b {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
To span more tracks we
just change the end row or
column line.
.b {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
http://bit.ly/aeasf-simple
The longhand for line-
based placement means
up to 4 properties to
position each element. .a {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
Declare start and end
values with grid-column
and grid-row.
Values are separated by a
/ symbol.
.a {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
Declare all 4 values using
the grid-area property.
.a {
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 2 / 2 / 3 / 4;
}
Grid lines relate to writing mode. In
a right to left language such as
Arabic the first column line is the
right-hand line.
Grid Terminology
Grid Lines
Lines can be horizontal or vertical. They
are referred to by number and can be
named.
Highlighted is Column Line 2.
Grid Track
A Grid Track is the space between two
Grid Lines. Tracks can be horizontal or
vertical (rows or columns).
The highlighted Grid Track is between
Row Lines 2 and 3.
Grid Cell
The smallest unit on our grid, a Grid Cell
is the space between four Grid Lines. It’s
just like a table cell.
The highlighted Grid Cell is between row
lines 2 and 3 and column lines 2 and 3.
Grid Area
Any area of the Grid bound by 4 Grid
Lines. It can contain many Grid Cells.
The highlighted Grid Area is between
row lines 1 and 3, column lines 2 and 4.
All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
Line-based placement
The HTML around my
page content.
The various areas of my
page are child elements
of a div with a class of
wrapper.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
</div>
Declaring a grid on
wrapper.
The grid has two columns
and two rows, making 3
column lines and 3 row
lines.
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 4fr;
grid-template-rows: auto auto;
grid-column-gap: 2em;
grid-row-gap: 20px;
}
The fr unit
• Assigns to the track a fraction of the available
space in the container.

• Before fractions are calculated the space
assigned to any fixed width tracks and gaps is
removed.

• Acts in a similar way to flex-grow in Flexbox.
Grid Layout
I am creating three grid
column tracks, all 1fr in
width.
This gives me three equally
sized column tracks.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Grid Layout
If I create the first column
as 600 pixels and then
have two 1fr columns the
600 pixel track is removed
from the available space
and the remainder is
distributed equally
between the two columns.
.wrapper {
display: grid;
grid-template-columns: 600px 1fr 1fr;
}
Grid Layout
With a 600 pixel column, a
1fr and a 3fr column. The
600 pixels is removed from
the available space then
the remaining space is
divided by 4.
The 1fr column gets 25%
and the 3fr column 75%.
.wrapper {
display: grid;
grid-template-columns: 600px 1fr 3fr;
}
http://alistapart.com/article/holygrail
Three columns. One fixed-width
sidebar for your navigation, another
for, say, your Google Ads or your Flickr
photos—and, as in a fancy truffle, a
liquid center for the real substance.
Grid Layout
CSS Grid “Holy Grail”. //css
.wrapper {
display: grid;
grid-template-columns: 300px 1fr 300px;
grid-template-rows: auto;
grid-column-gap: 20px;
}
.header { grid-column: 1 / 4; }
.content { grid-column: 2 / 3; grid-row: 2 / 3; }
.side1 { grid-column: 1 / 2; grid-row: 2 / 3; }
.side2 { grid-column: 3 / 4; grid-row: 2 / 3; }
.footer { grid-column: 1 / 4; grid-row: 3 / 4; }
//html
<div class="wrapper">
<header class="header">This is the header</header>
<article class="content"></article>
<div class="side1"></div>
<div class="side2"></div>
<footer class="footer"></div>
</div>
Declaring a grid on
wrapper.
The grid has two columns
and two rows, making 3
column lines and 3 row
lines.
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 4fr;
grid-template-rows: auto auto;
grid-column-gap: 2em;
grid-row-gap: 20px;
}
Positioning our elements
using the grid-column and
grid-row shorthand.
This is all we need to do
to create our layout.
.mainheader {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.panel {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.content {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
http://bit.ly/aeasf-line-based1
I can add a footer to this
layout.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
<footer class="mainfooter"></footer>
</div>
Positioning the footer
between row lines three
and four.
.mainfooter {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
http://bit.ly/aeasf-line-based2
Our grid only has 3 row
lines specified - yet we
placed an item between
row lines 3 and 4.
Grid creates an implicit
grid line for us.
.wrapper {
display: grid;
grid-template-columns: 2fr 4fr;
grid-template-rows: auto auto;
grid-column-gap: 2em;
grid-row-gap: 20px;
}
.mainfooter {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
Grid lines can be explicit or implicit
• Explicit grid lines are those specified using grid-
template-rows or grid-template-columns.
• Implicit lines are created when you place
something into a row or column track outside of
the explicit grid.
• Default behaviour is those tracks are auto sized.
You can specify a size with the grid-auto-
columns and grid-auto-rows properties.
For many layouts you may
be able to not specify
grid-template-rows at all.
Grid will create rows as
you position content.
.wrapper {
display: grid;
grid-template-columns: 2fr 4fr;
grid-column-gap: 2em;
grid-row-gap: 20px;
}
Grid is “table like” however …
• Unlike a table for layout Grid does not rely on
your content being a particular order in the
source.

• Being entirely described in CSS we can move
things around the Grid at different breakpoints,
introduce or redefine a Grid for any breakpoint.
Using Grid to order the
page elements in a single
column for narrow screen
widths.
.wrapper {
display: grid;
grid-row-gap: 10px;
}
.mainheader {
grid-row: 1 / 2;
}
.content {
grid-row: 2 / 3;
}
.panel {
grid-row: 3 / 4;
}
.mainfooter {
grid-row: 4 / 5;
}
http://bit.ly/aeasf-line-based3
Redefine the Grid at min-
width 550 pixels.
Position items as in the
earlier example.
@media (min-width: 550px) {
.wrapper {
grid-template-columns: 2fr 4fr;
grid-column-gap: 2em;
grid-row-gap: 20px;
}
.mainheader {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.panel {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.content {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.mainfooter {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
}
Named Grid Lines
http://bit.ly/aeasf-named-lines
Name lines with the name
in square brackets.
Remember we are naming
grid lines and not grid
tracks. .wrapper {
display: grid;
grid-row-gap: 10px;
grid-template-rows:
[row-header-start] auto
[row-content-start] auto
[row-panel-start] auto
[row-footer-start] auto [row-footer-end];
}
Here we are positioning
based on line numbers.
.mainheader {
grid-row: 1 / 2;
}
.content {
grid-row: 2 / 3;
}
.panel {
grid-row: 3 / 4;
}
.mainfooter {
grid-row: 4 / 5;
}
Here we are positioning
by named lines.
.mainheader {
grid-row: row-header-start;
}
.content {
grid-row: row-content-start;
}
.panel {
grid-row: row-panel-start;
}
.mainfooter {
grid-row: row-footer-start;
}
Named Areas
http://bit.ly/aeasf-template-areas
We assign a name to the
elements on our page.
I am doing this outside of
any Media Queries.
.mainheader {
grid-area: header;
}
.content {
grid-area: content;
}
.panel {
grid-area: sidebar;
}
.mainfooter {
grid-area: footer;
}
Describe the layout on
the parent element using
the grid-template-areas
property.
.wrapper {
display: grid;
grid-row-gap: 10px;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
Redefining the template
areas for the wider
layout.
@media (min-width: 550px) {
.wrapper {
grid-column-gap: 2em;
grid-row-gap: 20px;
grid-template-columns: 2fr 4fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer"
}
}
Repeating the name of an
area causes the area to
span across those grid
cells.
This can be seen in the
header and footer of this
layout.
@media (min-width: 550px) {
.wrapper {
grid-column-gap: 2em;
grid-row-gap: 20px;
grid-template-columns: 2fr 4fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer"
}
}
Repeating the name of an
area causes the area to
span across those grid
cells.
This can be seen in the
header and footer of this
layout.
@media (min-width: 550px) {
.wrapper {
grid-column-gap: 2em;
grid-row-gap: 20px;
grid-template-columns: 2fr 4fr;
grid-template-areas:
"header header"
"sidebar content"
" . footer"
}
}
Implicit Named Grid Lines
Named grid areas create
four implicit named lines.
You can use these in the
same way as lines you
have explicitly named.
.wrapper {
.wrapper {
grid-column-gap: 2em;
grid-row-gap: 20px;
grid-template-columns: 2fr 4fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer"
}
}
.test {
z-index: 100;
background-color: red;
grid-column: content-start / content-end;
grid-row: content-start / footer-end;
}
Items on the Grid can be layered
using the z-index property.
A 12 column, flexible grid
The Bootstrap grid, and
those in other
frameworks relies on our
describing the layout in
the markup.
<!-- Stack the columns on mobile by making one full-width and
the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3%
wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
With CSS Grid Layout we describe the
layout in the CSS and can redefine
that description at any breakpoint.
getskeleton.com
You can use the repeat
keyword to repeat all or
part of the grid definition.
This would create 4 200
pixel wide tracks,
separated by a 100 pixel
wide track.
grid-template-columns: repeat(4, 200px 100px);
We can give multiple grid
lines the same name.
This means we can use
the span keyword to span
n number of lines, rather
than specifying a specific
grid line.
.wrapper {
grid-template-columns:
repeat(4, [col-a] 200px [col-b] 100px);
}
.content {
grid-column: col-a 2 / span 2;
}
.aside {
grid-column: col-a 2 / span col-b 2;
}
The markup used to
create the Grid using the
Skeleton framework.
Like the Bootstrap Grid
and other similar
frameworks it requires
classes that describe the
grid to be added to the
markup.
<div class="container">
<h1>Skeleton Grid</h1>
<div class="example-grid">
<div class="row">
<div class="four columns">Four columns</div>
<div class="four columns">Four columns</div>
<div class="four columns">Four columns</div>
</div>
<div class="row">
<div class="eight columns">Eight columns</div>
<div class="four columns">Four columns</div>
</div>
<div class="row">
<div class="three columns">Three columns</div>
<div class="three columns">Three columns</div>
<div class="three columns">Three columns</div>
<div class="three columns">Three columns</div>
</div>
<div class="row">
<div class="six columns">Six columns</div>
<div class="six columns">Six columns</div>
</div>
</div>
When using CSS Grid
Layout we have no need
to describe our grid in
markup.
<div class="wrapper skeleton">
<h1 class="header">CSS Grid Layout Version</h1>
<div class="box1">Four columns</div>
<div class="box2">Four columns</div>
<div class="box3">Four columns</div>
<div class="box4">Eight columns</div>
<div class="box5">Four columns</div>
<div class="box6">Three columns</div>
<div class="box7">Three columns</div>
<div class="box8">Three columns</div>
<div class="box9">Three columns</div>
<div class="box10">Six columns</div>
<div class="box11">Six columns</div>
</div>
Defining the 12 column
grid.
The repeat keyword
repeats the pattern of
columns or rows the
number of times specified
before the comma.
.wrapper {
display: grid;
grid-template-columns: repeat(12, [col] 1fr );
grid-template-rows: repeat(5, [row] auto) ;
grid-column-gap: 1em;
grid-row-gap: 15px;
}
Placing box1 on the grid.
Multiple lines have the
same name. This means we
can use the span keyword.
Here I place box1 starting
at the first line named col,
spanning to the 4th line.
The box is placed in the
first line named row and
spans 1 line - the default.
.box1 {
grid-column: col / span 4;
grid-row: row ;
}
Placing box8 on the grid.
Starting on column line 7,
spanning 3 lines.
In the 3rd row named row,
spanning 1 line.
.box8 {
grid-column: col 7 / span 3;
grid-row: row 3 ;
}
With Grid Layout we can
easily span rows just like
columns.
.box1b {
grid-column: col / span 4;
grid-row: row / span 2;
}
.box2b {
grid-column: col 5 / span 4;
grid-row: row / span 3;
}
http://bit.ly/aeasf-12col
The header and footer
span the full grid.
The content and panel
display side by side.
.mainheader {
grid-column: col / span 12;
grid-row: row ;
}
.mainfooter {
grid-column: col / span 12;
grid-row: row 3 ;
}
.content {
grid-column: col 5 / span 8;
grid-row: row 2 ;
}
.panel {
grid-column: col / span 4;
grid-row: row 2 ;
}
http://bit.ly/aeasf-12col-layout
The header and footer
span the full grid.
The content and panel
display side by side.
.mainheader {
grid-column: col / span 12;
grid-row: row ;
}
.mainfooter {
grid-column: col / span 12;
grid-row: row 3 ;
}
.content {
grid-column: col 5 / span 8;
grid-row: row 2 ;
}
.panel {
grid-column: col / span 4;
grid-row: row 2 ;
}
I change three values to
make our panel extend to
the foot of the page.
.mainheader {
grid-column: col / span 12;
grid-row: row ;
}
.mainfooter {
grid-column: col 5 / span 8;
grid-row: row 3 ;
}
.content {
grid-column: col 5 / span 8;
grid-row: row 2 ;
}
.panel {
grid-column: col / span 4;
grid-row: row 2 / span 2 ;
}
Grid and Accessibility
With great power comes
responsibility.
Power and responsibility
• Good = creating the most accessible source
order and using Grid or Flexbox to get the
optimal display for each device.
• Bad = using Grid or Flexbox as an excuse to
forget about the source.
• Terrible - stripping out semantic elements to
make everything a grid or flex item.
https://drafts.csswg.org/css-grid/#source-independence
Grid item placement and reordering
must not be used as a substitute for
correct source ordering, as that can
ruin the accessibility of the document.
http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html
https://rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility/
Nested Grids and Subgrids
In this markup the boxes
e, f and g are children of
the element with a class
of d.
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
</div>
</div>
I have declared a grid on
the wrapper div, and
positioned the immediate
children - the elements
with classes a to d.
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns:
repeat(4, [col] 150px);
repeat(2, [row] auto);
}
.a {
grid-column: col / span 2;
grid-row: row;
}
.b {
grid-column: col 3 / span 2;
grid-row: row;
}
.c {
grid-column: col / span 2;
grid-row: row 2;
}
.d{
grid-column: col 3 / span 2;
grid-row: row 2;
}
To make box d a grid itself
I declare a grid as normal
then position the children
of this element.
They take their grid lines
from the grid declared on
box d.
.d{
grid-column: col 3 / span gutter 2;
grid-row: row 2;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
}
.e {
grid-column: 1 / 3;
grid-row: 1;
}
.f {
grid-column: 1;
grid-row: 2;
}
.g {
grid-column: 2;
grid-row: 2;
}
Declaring a subgrid
In our existing layout we
are creating a completely
new grid on box d.
.d{
grid-column: col 3 / span 2;
grid-row: row 2;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
}
If we declare that this
grid is a subgrid, we can
then position the children
of this element on the
same grid their parent is
placed on. .d{
grid-column: col 3 / span 2;
grid-row: row 2;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
http://dev.w3.org/csswg/css-grid/
“The following features are at-risk, and may
be dropped during the CR period:
the subgrid value of grid-template-columns
and grid-template-rows, and its component
parts individually”
Without subgrid we create the potential for
accessibility problems. Authors may remove
semantic markup in order to use grid layout.
Grid needs your feedback!
Enable Experimental Web Platform Features in Chrome.
Play with my examples and think up ways you would use Grid.
Follow the CSS Grid conversation on www-style by searching for [css-grid].
See the current issues in the Editor’s Draft http://dev.w3.org/csswg/css-grid/#issues-
index
Browser Support
All my examples work in Chrome unprefixed - you need to enable the Experimental
Web Platform Features flag.
You can also use Webkit nightlies, with the -webkit prefix.
The work in Blink and Webkit is being done by Igalia, sponsored by Bloomberg.
IE10 and up has support for the old syntax, with an -ms prefix.
Grid is on the Edge backlog, marked as High Priority.
Mozilla are currently implementing Grid in Firefox. Some examples work in Firefox
Nightlies, unprefixed.
Browser Support
Things change rapidly as Grid is being implemented RIGHT NOW in browsers.
I try to keep track and update http://gridbyexample.com/browsers/
All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
Thank you!
https://rachelandrew.co.uk/presentations/css-grid
@rachelandrew
Curated weekly CSS layout news at http://csslayout.news

Weitere ähnliche Inhalte

Was ist angesagt?

Debugging node in prod
Debugging node in prodDebugging node in prod
Debugging node in prodYunong Xiao
 
PostgreSQL Administration for System Administrators
PostgreSQL Administration for System AdministratorsPostgreSQL Administration for System Administrators
PostgreSQL Administration for System AdministratorsCommand Prompt., Inc
 
우아한 모노리스
우아한 모노리스우아한 모노리스
우아한 모노리스Arawn Park
 
JSON-LD for RESTful services
JSON-LD for RESTful servicesJSON-LD for RESTful services
JSON-LD for RESTful servicesMarkus Lanthaler
 
Sphinx autodoc - automated api documentation - PyCon.KR 2015
Sphinx autodoc - automated api documentation - PyCon.KR 2015Sphinx autodoc - automated api documentation - PyCon.KR 2015
Sphinx autodoc - automated api documentation - PyCon.KR 2015Takayuki Shimizukawa
 
Blazing Performance with Flame Graphs
Blazing Performance with Flame GraphsBlazing Performance with Flame Graphs
Blazing Performance with Flame GraphsBrendan Gregg
 
Working With a Real-World Dataset in Neo4j: Import and Modeling
Working With a Real-World Dataset in Neo4j: Import and ModelingWorking With a Real-World Dataset in Neo4j: Import and Modeling
Working With a Real-World Dataset in Neo4j: Import and ModelingNeo4j
 
MySQL GTID 시작하기
MySQL GTID 시작하기MySQL GTID 시작하기
MySQL GTID 시작하기I Goo Lee
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.jsVikash Singh
 
Introduction to Redis
Introduction to RedisIntroduction to Redis
Introduction to RedisArnab Mitra
 
High Availability PostgreSQL with Zalando Patroni
High Availability PostgreSQL with Zalando PatroniHigh Availability PostgreSQL with Zalando Patroni
High Availability PostgreSQL with Zalando PatroniZalando Technology
 
Apache Spark Fundamentals
Apache Spark FundamentalsApache Spark Fundamentals
Apache Spark FundamentalsZahra Eskandari
 
Unix shell scripting basics
Unix shell scripting basicsUnix shell scripting basics
Unix shell scripting basicsManav Prasad
 
Hudi: Large-Scale, Near Real-Time Pipelines at Uber with Nishith Agarwal and ...
Hudi: Large-Scale, Near Real-Time Pipelines at Uber with Nishith Agarwal and ...Hudi: Large-Scale, Near Real-Time Pipelines at Uber with Nishith Agarwal and ...
Hudi: Large-Scale, Near Real-Time Pipelines at Uber with Nishith Agarwal and ...Databricks
 
점진적인 레거시 웹 애플리케이션 개선 과정
점진적인 레거시 웹 애플리케이션 개선 과정점진적인 레거시 웹 애플리케이션 개선 과정
점진적인 레거시 웹 애플리케이션 개선 과정Arawn Park
 

Was ist angesagt? (20)

Debugging node in prod
Debugging node in prodDebugging node in prod
Debugging node in prod
 
PostgreSQL
PostgreSQLPostgreSQL
PostgreSQL
 
PostgreSQL Administration for System Administrators
PostgreSQL Administration for System AdministratorsPostgreSQL Administration for System Administrators
PostgreSQL Administration for System Administrators
 
우아한 모노리스
우아한 모노리스우아한 모노리스
우아한 모노리스
 
JSON-LD for RESTful services
JSON-LD for RESTful servicesJSON-LD for RESTful services
JSON-LD for RESTful services
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
 
Sphinx autodoc - automated api documentation - PyCon.KR 2015
Sphinx autodoc - automated api documentation - PyCon.KR 2015Sphinx autodoc - automated api documentation - PyCon.KR 2015
Sphinx autodoc - automated api documentation - PyCon.KR 2015
 
Postgre sql vs oracle
Postgre sql vs oraclePostgre sql vs oracle
Postgre sql vs oracle
 
Blazing Performance with Flame Graphs
Blazing Performance with Flame GraphsBlazing Performance with Flame Graphs
Blazing Performance with Flame Graphs
 
Working With a Real-World Dataset in Neo4j: Import and Modeling
Working With a Real-World Dataset in Neo4j: Import and ModelingWorking With a Real-World Dataset in Neo4j: Import and Modeling
Working With a Real-World Dataset in Neo4j: Import and Modeling
 
Flask Basics
Flask BasicsFlask Basics
Flask Basics
 
MySQL GTID 시작하기
MySQL GTID 시작하기MySQL GTID 시작하기
MySQL GTID 시작하기
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Introduction to Redis
Introduction to RedisIntroduction to Redis
Introduction to Redis
 
High Availability PostgreSQL with Zalando Patroni
High Availability PostgreSQL with Zalando PatroniHigh Availability PostgreSQL with Zalando Patroni
High Availability PostgreSQL with Zalando Patroni
 
Apache Spark Fundamentals
Apache Spark FundamentalsApache Spark Fundamentals
Apache Spark Fundamentals
 
Unix shell scripting basics
Unix shell scripting basicsUnix shell scripting basics
Unix shell scripting basics
 
Hudi: Large-Scale, Near Real-Time Pipelines at Uber with Nishith Agarwal and ...
Hudi: Large-Scale, Near Real-Time Pipelines at Uber with Nishith Agarwal and ...Hudi: Large-Scale, Near Real-Time Pipelines at Uber with Nishith Agarwal and ...
Hudi: Large-Scale, Near Real-Time Pipelines at Uber with Nishith Agarwal and ...
 
점진적인 레거시 웹 애플리케이션 개선 과정
점진적인 레거시 웹 애플리케이션 개선 과정점진적인 레거시 웹 애플리케이션 개선 과정
점진적인 레거시 웹 애플리케이션 개선 과정
 
Vue.js
Vue.jsVue.js
Vue.js
 

Andere mochten auch

Introduction to Go programming
Introduction to Go programmingIntroduction to Go programming
Introduction to Go programmingExotel
 
Creating HTML Pages
Creating HTML PagesCreating HTML Pages
Creating HTML PagesMike Crabb
 
Node.js and The Internet of Things
Node.js and The Internet of ThingsNode.js and The Internet of Things
Node.js and The Internet of ThingsLosant
 
New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0Mike Taylor
 
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebRachel Andrew
 
Test Automation - Principles and Practices
Test Automation - Principles and PracticesTest Automation - Principles and Practices
Test Automation - Principles and PracticesAnand Bagmar
 
Data made out of functions
Data made out of functionsData made out of functions
Data made out of functionskenbot
 
Top Insights from SaaStr by Leading Enterprise Software Experts
Top Insights from SaaStr by Leading Enterprise Software ExpertsTop Insights from SaaStr by Leading Enterprise Software Experts
Top Insights from SaaStr by Leading Enterprise Software ExpertsOpenView
 
iOS Scroll Performance
iOS Scroll PerformanceiOS Scroll Performance
iOS Scroll PerformanceKyle Sherman
 
Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information ArchitectureMike Crabb
 
Launching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's BackLaunching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's Backjoshelman
 
The Future of Real-Time in Spark
The Future of Real-Time in SparkThe Future of Real-Time in Spark
The Future of Real-Time in SparkReynold Xin
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the InternetMike Crabb
 
Mobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalMobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalAleyda Solís
 
Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Emiland
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShareSlideShare
 
What I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessWhat I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessJonathon Colman
 
Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)a16z
 
IT in Healthcare
IT in HealthcareIT in Healthcare
IT in HealthcareNetApp
 

Andere mochten auch (20)

Introduction to Go programming
Introduction to Go programmingIntroduction to Go programming
Introduction to Go programming
 
Creating HTML Pages
Creating HTML PagesCreating HTML Pages
Creating HTML Pages
 
Node.js and The Internet of Things
Node.js and The Internet of ThingsNode.js and The Internet of Things
Node.js and The Internet of Things
 
Testing at Spotify
Testing at SpotifyTesting at Spotify
Testing at Spotify
 
New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0
 
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern Web
 
Test Automation - Principles and Practices
Test Automation - Principles and PracticesTest Automation - Principles and Practices
Test Automation - Principles and Practices
 
Data made out of functions
Data made out of functionsData made out of functions
Data made out of functions
 
Top Insights from SaaStr by Leading Enterprise Software Experts
Top Insights from SaaStr by Leading Enterprise Software ExpertsTop Insights from SaaStr by Leading Enterprise Software Experts
Top Insights from SaaStr by Leading Enterprise Software Experts
 
iOS Scroll Performance
iOS Scroll PerformanceiOS Scroll Performance
iOS Scroll Performance
 
Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information Architecture
 
Launching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's BackLaunching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's Back
 
The Future of Real-Time in Spark
The Future of Real-Time in SparkThe Future of Real-Time in Spark
The Future of Real-Time in Spark
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the Internet
 
Mobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalMobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigital
 
Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShare
 
What I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessWhat I Carry: 10 Tools for Success
What I Carry: 10 Tools for Success
 
Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)
 
IT in Healthcare
IT in HealthcareIT in Healthcare
IT in Healthcare
 

Ähnlich wie CSS Grid Layout for Topconf, Linz

Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutRachel Andrew
 
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutRachel Andrew
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid LayoutRachel Andrew
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutRachel Andrew
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid LayoutRachel Andrew
 
CSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenCSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenRachel Andrew
 
CSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NERachel Andrew
 
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart OrlandoCSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart OrlandoRachel Andrew
 
The Grid - The Future of CSS Layout
The Grid - The Future of CSS LayoutThe Grid - The Future of CSS Layout
The Grid - The Future of CSS LayoutRonny Siikaluoma
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutRachel Andrew
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016Rachel Andrew
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgRachel Andrew
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureRachel Andrew
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFRachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRachel Andrew
 

Ähnlich wie CSS Grid Layout for Topconf, Linz (20)

Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
 
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
 
CSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenCSS Grid Layout - All Things Open
CSS Grid Layout - All Things Open
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
CSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NE
 
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart OrlandoCSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart Orlando
 
The Grid - The Future of CSS Layout
The Grid - The Future of CSS LayoutThe Grid - The Future of CSS Layout
The Grid - The Future of CSS Layout
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the future
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
 

Mehr von Rachel Andrew

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutRachel Andrew
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutRachel Andrew
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutRachel Andrew
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel Andrew
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS LayoutRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Rachel Andrew
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsRachel Andrew
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayRachel Andrew
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSRachel Andrew
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & FriendsRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Rachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Rachel Andrew
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp KeynoteRachel Andrew
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldRachel Andrew
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldRachel Andrew
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersRachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersRachel Andrew
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridRachel Andrew
 

Mehr von Rachel Andrew (20)

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid Layout
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
 
Graduating to Grid
Graduating to GridGraduating to Grid
Graduating to Grid
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real World
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
 

Kürzlich hochgeladen

Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...OnePlan Solutions
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作qr0udbr0
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfAlina Yurenko
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceBrainSell Technologies
 
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odishasmiwainfosol
 
Cyber security and its impact on E commerce
Cyber security and its impact on E commerceCyber security and its impact on E commerce
Cyber security and its impact on E commercemanigoyal112
 
Machine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringMachine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringHironori Washizaki
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtimeandrehoraa
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...confluent
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based projectAnoyGreter
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZABSYZ Inc
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsChristian Birchler
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Rob Geurden
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEEVICTOR MAESTRE RAMIREZ
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Natan Silnitsky
 
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Matt Ray
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesPhilip Schwarz
 

Kürzlich hochgeladen (20)

Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. Salesforce
 
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
 
Cyber security and its impact on E commerce
Cyber security and its impact on E commerceCyber security and its impact on E commerce
Cyber security and its impact on E commerce
 
Machine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringMachine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their Engineering
 
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort ServiceHot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtime
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based project
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZ
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
 
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
 

CSS Grid Layout for Topconf, Linz

  • 1. CSS Grid Layout Rachel Andrew Topconf Linz, February 2016
  • 3. CSS in 2015 is amazing.
  • 4. The trouble with CSS layout • Floats and clearfix hacks • Absolute positioning means elements are taken out of document flow and risk overlaps • Redundant markup and positioning oddities with display: table • White space issues with inline-block
  • 6. Seeing Flexbox as the silver bullet for layout issues is likely to lead us down another path of layout hacks.
  • 7. The cost of taming layout methods • Developer hours spent learning non-obvious concepts. • Compromises in terms of document semantics in order to achieve responsive layouts. • Needing to lean on frameworks to help with complex math. • Adding markup to create grids • Using preprocessors to abstract layout hacks
  • 8. We need a designed for purpose layout system for the sites and applications we develop today.
  • 10. Our HTML consists of a div with a class of wrapper and two child elements, a and b. <div class="wrapper"> <div class="a">A</div> <div class="b">B</div> </div>
  • 11. To create a grid we use a new value of the display property. display: grid .wrapper { display: grid; }
  • 12. We describe the grid using the new properties: grid-template-columns grid-template-rows .wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: auto auto; }
  • 13. We position items using the new properties: grid-column-start
 grid-column-end
 grid-row-start
 grid-row-end .a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
  • 14. To position an item bottom centre, I start at column line 2 and end at column line 3. .b { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; }
  • 15. To span more tracks we just change the end row or column line. .b { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } http://bit.ly/aeasf-simple
  • 16. The longhand for line- based placement means up to 4 properties to position each element. .a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .b { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; }
  • 17. Declare start and end values with grid-column and grid-row. Values are separated by a / symbol. .a { grid-column: 1 / 2; grid-row: 1 / 2; } .b { grid-column: 2 / 4; grid-row: 2 / 3; }
  • 18. Declare all 4 values using the grid-area property. .a { grid-area: 1 / 1 / 2 / 2; } .b { grid-area: 2 / 2 / 3 / 4; }
  • 19. Grid lines relate to writing mode. In a right to left language such as Arabic the first column line is the right-hand line.
  • 21. Grid Lines Lines can be horizontal or vertical. They are referred to by number and can be named. Highlighted is Column Line 2.
  • 22. Grid Track A Grid Track is the space between two Grid Lines. Tracks can be horizontal or vertical (rows or columns). The highlighted Grid Track is between Row Lines 2 and 3.
  • 23. Grid Cell The smallest unit on our grid, a Grid Cell is the space between four Grid Lines. It’s just like a table cell. The highlighted Grid Cell is between row lines 2 and 3 and column lines 2 and 3.
  • 24. Grid Area Any area of the Grid bound by 4 Grid Lines. It can contain many Grid Cells. The highlighted Grid Area is between row lines 1 and 3, column lines 2 and 4.
  • 25. All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
  • 27.
  • 28. The HTML around my page content. The various areas of my page are child elements of a div with a class of wrapper. <div class="wrapper"> <header class="mainheader"></header> <div class="panel"></div> <div class="content"></div> </div>
  • 29.
  • 30. Declaring a grid on wrapper. The grid has two columns and two rows, making 3 column lines and 3 row lines. .wrapper { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 2fr 4fr; grid-template-rows: auto auto; grid-column-gap: 2em; grid-row-gap: 20px; }
  • 31. The fr unit • Assigns to the track a fraction of the available space in the container.
 • Before fractions are calculated the space assigned to any fixed width tracks and gaps is removed.
 • Acts in a similar way to flex-grow in Flexbox.
  • 32. Grid Layout I am creating three grid column tracks, all 1fr in width. This gives me three equally sized column tracks. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  • 33. Grid Layout If I create the first column as 600 pixels and then have two 1fr columns the 600 pixel track is removed from the available space and the remainder is distributed equally between the two columns. .wrapper { display: grid; grid-template-columns: 600px 1fr 1fr; }
  • 34. Grid Layout With a 600 pixel column, a 1fr and a 3fr column. The 600 pixels is removed from the available space then the remaining space is divided by 4. The 1fr column gets 25% and the 3fr column 75%. .wrapper { display: grid; grid-template-columns: 600px 1fr 3fr; }
  • 35. http://alistapart.com/article/holygrail Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance.
  • 36. Grid Layout CSS Grid “Holy Grail”. //css .wrapper { display: grid; grid-template-columns: 300px 1fr 300px; grid-template-rows: auto; grid-column-gap: 20px; } .header { grid-column: 1 / 4; } .content { grid-column: 2 / 3; grid-row: 2 / 3; } .side1 { grid-column: 1 / 2; grid-row: 2 / 3; } .side2 { grid-column: 3 / 4; grid-row: 2 / 3; } .footer { grid-column: 1 / 4; grid-row: 3 / 4; } //html <div class="wrapper"> <header class="header">This is the header</header> <article class="content"></article> <div class="side1"></div> <div class="side2"></div> <footer class="footer"></div> </div>
  • 37.
  • 38. Declaring a grid on wrapper. The grid has two columns and two rows, making 3 column lines and 3 row lines. .wrapper { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 2fr 4fr; grid-template-rows: auto auto; grid-column-gap: 2em; grid-row-gap: 20px; }
  • 39.
  • 40. Positioning our elements using the grid-column and grid-row shorthand. This is all we need to do to create our layout. .mainheader { grid-column: 1 / 3; grid-row: 1 / 2; } .panel { grid-column: 1 / 2; grid-row: 2 / 3; } .content { grid-column: 2 / 3; grid-row: 2 / 3; }
  • 41.
  • 43. I can add a footer to this layout. <div class="wrapper"> <header class="mainheader"></header> <div class="panel"></div> <div class="content"></div> <footer class="mainfooter"></footer> </div>
  • 44. Positioning the footer between row lines three and four. .mainfooter { grid-column: 1 / 3; grid-row: 3 / 4; }
  • 46. Our grid only has 3 row lines specified - yet we placed an item between row lines 3 and 4. Grid creates an implicit grid line for us. .wrapper { display: grid; grid-template-columns: 2fr 4fr; grid-template-rows: auto auto; grid-column-gap: 2em; grid-row-gap: 20px; } .mainfooter { grid-column: 1 / 3; grid-row: 3 / 4; }
  • 47. Grid lines can be explicit or implicit • Explicit grid lines are those specified using grid- template-rows or grid-template-columns. • Implicit lines are created when you place something into a row or column track outside of the explicit grid. • Default behaviour is those tracks are auto sized. You can specify a size with the grid-auto- columns and grid-auto-rows properties.
  • 48. For many layouts you may be able to not specify grid-template-rows at all. Grid will create rows as you position content. .wrapper { display: grid; grid-template-columns: 2fr 4fr; grid-column-gap: 2em; grid-row-gap: 20px; }
  • 49. Grid is “table like” however … • Unlike a table for layout Grid does not rely on your content being a particular order in the source.
 • Being entirely described in CSS we can move things around the Grid at different breakpoints, introduce or redefine a Grid for any breakpoint.
  • 50. Using Grid to order the page elements in a single column for narrow screen widths. .wrapper { display: grid; grid-row-gap: 10px; } .mainheader { grid-row: 1 / 2; } .content { grid-row: 2 / 3; } .panel { grid-row: 3 / 4; } .mainfooter { grid-row: 4 / 5; }
  • 52. Redefine the Grid at min- width 550 pixels. Position items as in the earlier example. @media (min-width: 550px) { .wrapper { grid-template-columns: 2fr 4fr; grid-column-gap: 2em; grid-row-gap: 20px; } .mainheader { grid-column: 1 / 3; grid-row: 1 / 2; } .panel { grid-column: 1 / 2; grid-row: 2 / 3; } .content { grid-column: 2 / 3; grid-row: 2 / 3; } .mainfooter { grid-column: 1 / 3; grid-row: 3 / 4; } }
  • 55. Name lines with the name in square brackets. Remember we are naming grid lines and not grid tracks. .wrapper { display: grid; grid-row-gap: 10px; grid-template-rows: [row-header-start] auto [row-content-start] auto [row-panel-start] auto [row-footer-start] auto [row-footer-end]; }
  • 56. Here we are positioning based on line numbers. .mainheader { grid-row: 1 / 2; } .content { grid-row: 2 / 3; } .panel { grid-row: 3 / 4; } .mainfooter { grid-row: 4 / 5; }
  • 57. Here we are positioning by named lines. .mainheader { grid-row: row-header-start; } .content { grid-row: row-content-start; } .panel { grid-row: row-panel-start; } .mainfooter { grid-row: row-footer-start; }
  • 60. We assign a name to the elements on our page. I am doing this outside of any Media Queries. .mainheader { grid-area: header; } .content { grid-area: content; } .panel { grid-area: sidebar; } .mainfooter { grid-area: footer; }
  • 61. Describe the layout on the parent element using the grid-template-areas property. .wrapper { display: grid; grid-row-gap: 10px; grid-template-areas: "header" "content" "sidebar" "footer"; }
  • 62.
  • 63.
  • 64. Redefining the template areas for the wider layout. @media (min-width: 550px) { .wrapper { grid-column-gap: 2em; grid-row-gap: 20px; grid-template-columns: 2fr 4fr; grid-template-areas: "header header" "sidebar content" "footer footer" } }
  • 65.
  • 66.
  • 67. Repeating the name of an area causes the area to span across those grid cells. This can be seen in the header and footer of this layout. @media (min-width: 550px) { .wrapper { grid-column-gap: 2em; grid-row-gap: 20px; grid-template-columns: 2fr 4fr; grid-template-areas: "header header" "sidebar content" "footer footer" } }
  • 68. Repeating the name of an area causes the area to span across those grid cells. This can be seen in the header and footer of this layout. @media (min-width: 550px) { .wrapper { grid-column-gap: 2em; grid-row-gap: 20px; grid-template-columns: 2fr 4fr; grid-template-areas: "header header" "sidebar content" " . footer" } }
  • 69.
  • 71. Named grid areas create four implicit named lines. You can use these in the same way as lines you have explicitly named. .wrapper { .wrapper { grid-column-gap: 2em; grid-row-gap: 20px; grid-template-columns: 2fr 4fr; grid-template-areas: "header header" "sidebar content" "footer footer" } } .test { z-index: 100; background-color: red; grid-column: content-start / content-end; grid-row: content-start / footer-end; }
  • 72.
  • 73. Items on the Grid can be layered using the z-index property.
  • 74. A 12 column, flexible grid
  • 75. The Bootstrap grid, and those in other frameworks relies on our describing the layout in the markup. <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
  • 76. With CSS Grid Layout we describe the layout in the CSS and can redefine that description at any breakpoint.
  • 78. You can use the repeat keyword to repeat all or part of the grid definition. This would create 4 200 pixel wide tracks, separated by a 100 pixel wide track. grid-template-columns: repeat(4, 200px 100px);
  • 79. We can give multiple grid lines the same name. This means we can use the span keyword to span n number of lines, rather than specifying a specific grid line. .wrapper { grid-template-columns: repeat(4, [col-a] 200px [col-b] 100px); } .content { grid-column: col-a 2 / span 2; } .aside { grid-column: col-a 2 / span col-b 2; }
  • 80. The markup used to create the Grid using the Skeleton framework. Like the Bootstrap Grid and other similar frameworks it requires classes that describe the grid to be added to the markup. <div class="container"> <h1>Skeleton Grid</h1> <div class="example-grid"> <div class="row"> <div class="four columns">Four columns</div> <div class="four columns">Four columns</div> <div class="four columns">Four columns</div> </div> <div class="row"> <div class="eight columns">Eight columns</div> <div class="four columns">Four columns</div> </div> <div class="row"> <div class="three columns">Three columns</div> <div class="three columns">Three columns</div> <div class="three columns">Three columns</div> <div class="three columns">Three columns</div> </div> <div class="row"> <div class="six columns">Six columns</div> <div class="six columns">Six columns</div> </div> </div>
  • 81.
  • 82. When using CSS Grid Layout we have no need to describe our grid in markup. <div class="wrapper skeleton"> <h1 class="header">CSS Grid Layout Version</h1> <div class="box1">Four columns</div> <div class="box2">Four columns</div> <div class="box3">Four columns</div> <div class="box4">Eight columns</div> <div class="box5">Four columns</div> <div class="box6">Three columns</div> <div class="box7">Three columns</div> <div class="box8">Three columns</div> <div class="box9">Three columns</div> <div class="box10">Six columns</div> <div class="box11">Six columns</div> </div>
  • 83. Defining the 12 column grid. The repeat keyword repeats the pattern of columns or rows the number of times specified before the comma. .wrapper { display: grid; grid-template-columns: repeat(12, [col] 1fr ); grid-template-rows: repeat(5, [row] auto) ; grid-column-gap: 1em; grid-row-gap: 15px; }
  • 84. Placing box1 on the grid. Multiple lines have the same name. This means we can use the span keyword. Here I place box1 starting at the first line named col, spanning to the 4th line. The box is placed in the first line named row and spans 1 line - the default. .box1 { grid-column: col / span 4; grid-row: row ; }
  • 85. Placing box8 on the grid. Starting on column line 7, spanning 3 lines. In the 3rd row named row, spanning 1 line. .box8 { grid-column: col 7 / span 3; grid-row: row 3 ; }
  • 86.
  • 87. With Grid Layout we can easily span rows just like columns. .box1b { grid-column: col / span 4; grid-row: row / span 2; } .box2b { grid-column: col 5 / span 4; grid-row: row / span 3; }
  • 89. The header and footer span the full grid. The content and panel display side by side. .mainheader { grid-column: col / span 12; grid-row: row ; } .mainfooter { grid-column: col / span 12; grid-row: row 3 ; } .content { grid-column: col 5 / span 8; grid-row: row 2 ; } .panel { grid-column: col / span 4; grid-row: row 2 ; }
  • 91. The header and footer span the full grid. The content and panel display side by side. .mainheader { grid-column: col / span 12; grid-row: row ; } .mainfooter { grid-column: col / span 12; grid-row: row 3 ; } .content { grid-column: col 5 / span 8; grid-row: row 2 ; } .panel { grid-column: col / span 4; grid-row: row 2 ; }
  • 92. I change three values to make our panel extend to the foot of the page. .mainheader { grid-column: col / span 12; grid-row: row ; } .mainfooter { grid-column: col 5 / span 8; grid-row: row 3 ; } .content { grid-column: col 5 / span 8; grid-row: row 2 ; } .panel { grid-column: col / span 4; grid-row: row 2 / span 2 ; }
  • 93.
  • 95. With great power comes responsibility.
  • 96. Power and responsibility • Good = creating the most accessible source order and using Grid or Flexbox to get the optimal display for each device. • Bad = using Grid or Flexbox as an excuse to forget about the source. • Terrible - stripping out semantic elements to make everything a grid or flex item.
  • 97. https://drafts.csswg.org/css-grid/#source-independence Grid item placement and reordering must not be used as a substitute for correct source ordering, as that can ruin the accessibility of the document.
  • 100. Nested Grids and Subgrids
  • 101. In this markup the boxes e, f and g are children of the element with a class of d. <div class="wrapper"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d"> <div class="box e">E</div> <div class="box f">F</div> <div class="box g">G</div> </div> </div>
  • 102. I have declared a grid on the wrapper div, and positioned the immediate children - the elements with classes a to d. .wrapper { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, [col] 150px); repeat(2, [row] auto); } .a { grid-column: col / span 2; grid-row: row; } .b { grid-column: col 3 / span 2; grid-row: row; } .c { grid-column: col / span 2; grid-row: row 2; } .d{ grid-column: col 3 / span 2; grid-row: row 2; }
  • 103.
  • 104. To make box d a grid itself I declare a grid as normal then position the children of this element. They take their grid lines from the grid declared on box d. .d{ grid-column: col 3 / span gutter 2; grid-row: row 2; display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr; } .e { grid-column: 1 / 3; grid-row: 1; } .f { grid-column: 1; grid-row: 2; } .g { grid-column: 2; grid-row: 2; }
  • 105.
  • 107. In our existing layout we are creating a completely new grid on box d. .d{ grid-column: col 3 / span 2; grid-row: row 2; display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr; }
  • 108. If we declare that this grid is a subgrid, we can then position the children of this element on the same grid their parent is placed on. .d{ grid-column: col 3 / span 2; grid-row: row 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  • 109. http://dev.w3.org/csswg/css-grid/ “The following features are at-risk, and may be dropped during the CR period: the subgrid value of grid-template-columns and grid-template-rows, and its component parts individually”
  • 110. Without subgrid we create the potential for accessibility problems. Authors may remove semantic markup in order to use grid layout.
  • 111. Grid needs your feedback! Enable Experimental Web Platform Features in Chrome. Play with my examples and think up ways you would use Grid. Follow the CSS Grid conversation on www-style by searching for [css-grid]. See the current issues in the Editor’s Draft http://dev.w3.org/csswg/css-grid/#issues- index
  • 112.
  • 113. Browser Support All my examples work in Chrome unprefixed - you need to enable the Experimental Web Platform Features flag. You can also use Webkit nightlies, with the -webkit prefix. The work in Blink and Webkit is being done by Igalia, sponsored by Bloomberg. IE10 and up has support for the old syntax, with an -ms prefix. Grid is on the Edge backlog, marked as High Priority. Mozilla are currently implementing Grid in Firefox. Some examples work in Firefox Nightlies, unprefixed.
  • 114. Browser Support Things change rapidly as Grid is being implemented RIGHT NOW in browsers. I try to keep track and update http://gridbyexample.com/browsers/
  • 115. All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.