Scribd
Upload
82 views

Css4 Grid: True Layout Finally Arrives: Jen Kramer Harvard University Extension School

The document discusses the evolution of CSS layout techniques. [1] Floats were the original hack for layout but have disadvantages like unequal column heights. [2] Flexbox improved on floats by allowing equal heights and reordering but is limited to one dimension. [3] CSS Grid is designed for true two-dimensional layout and is the recommended future-proof solution, though browser support is still evolving.

Uploaded by

Fation Bacaj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
82 views

Css4 Grid: True Layout Finally Arrives: Jen Kramer Harvard University Extension School

The document discusses the evolution of CSS layout techniques. [1] Floats were the original hack for layout but have disadvantages like unequal column heights. [2] Flexbox improved on floats by allowing equal heights and reordering but is limited to one dimension. [3] CSS Grid is designed for true two-dimensional layout and is the recommended future-proof solution, though browser support is still evolving.

Uploaded by

Fation Bacaj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

JEN KRAMER

HARVARD UNIVERSITY EXTENSION SCHOOL

CSS4 GRID: TRUE LAYOUT


FINALLY ARRIVES
“There is no CSS Level 4… CSS the
language no longer has levels.”

https://www.w3.org/TR/css-2015/#css-levels
http://news.softpedia.com/news/w3c-set-to-publish-html-5-1-
already-started-work-on-html-5-2-508512.shtml
JEN KRAMER
HARVARD UNIVERSITY EXTENSION SCHOOL

C S SX
4 GRID: TRUE LAYOUT
FINALLY ARRIVES
PART 1

RESPONSIVE DESIGN
FLOATS

•  A hack from the start, right after table-based layout!

•  Features rows and cells.

•  Rows clear the floats on the cells.

•  Source ordering determines display, though some


(minor) rearrangement is possible.

•  Major disadvantage: equal column heights


.ROW

CELL/ CELL/ CELL/ CELL/


.COL-1 .COL-1 .COL-1 .COL-1

<div class=“row”>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
</div>
.ROW

CELL/ CELL/ CELL/ CELL/


.COL-1 .COL-1 .COL-1 .COL-1

.row::after { .col-1 {
content: ""; float: left;
display: table; margin-left: 4%;
clear: both; width: 20%;
} }
.ROW

CELL/ CELL/
.COL-1 .COL-1

CELL/ CELL/
.COL-1 .COL-1

@media only screen and (min-width: 480px)


and (max-width: 767px) {
.col-1 {
width: 44%;
}
}
ROW

CELL/
.COL-1

@media only screen and


CELL/ (max-width: 479px) {
.COL-1
.col-1 {
width: 98%;
margin: 1%;
CELL/
.COL-1 float: none;
}
}
CELL/
.COL-1
.ROW

CELL/
CELL/ .COL-1 There can be layout problems
.COL-1 2 with floats.

1 This can be resolved with


JavaScript, with a column
CELL/ equalizer script.
.COL-1
3
CELL/
.COL-1
4
/* rearranging the columns */
[class*="col-"] {
position: relative;
}
.col-push-1 {
left: 26%;
}
.col-pull-3 {
left: -74%;
}
NEXT UP

FLEXBOX
FLEXBOX
•  The first layout elements – but not designed to lay out
whole web pages

•  Features flex-containers (row) and flex-items (cells). Both are


required to work.

•  Excels at vertical centering and equal heights

•  Very easy to reorder boxes

•  Major disadvantages:

•  Wasn’t designed to be locked down for layouts! Works in


1 dimension only.

•  Browser support and syntax is challenging.


.ROW/CONTAINER

ITEM/ ITEM/ ITEM/ ITEM/


.COL-1 .COL-1 .COL-1 .COL-1

<div class=“row”>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
</div>
.row {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 1%;
}

Change flex-flow to other values to change


direction of rows – row reverse, column
reverse, no wrap
.col-1 {
flex: 0 0 24%; /* desktop */
}
flex: 0 0 48%; /* tablet */
}
flex: 0 0 98%; /* phone */
}
To change widths on .col-1, change the
flex-basis property. This is more flexible than
width.
/* rearranging the columns */

.col-push-1 {
order: 2;
}
.col-pull-3 {
order: 1;
}
FINALLY!

CSS GRID
WHY CSS GRID?

•  Built into CSS specification (in development).

•  No “row” markup required.

•  Grid is designed to work in 2 dimensions.

•  Use Flexbox for UI elements, but use Grid for major


layout.
https://drafts.csswg.org/css-grid/
ISSUES, WE’VE HAD A FEW

•  Now supported in latest versions of Firefox and


Chrome – with Edge to follow shortly

•  Old grid spec supported in IE 10 and 11 (will never be


updated to new spec)

•  Lots of bugs to go around

•  http://gridbyexample.com/browsers/ -- latest info


.WRAPPER

CELL/ CELL/ CELL/ CELL/


.COL-1 .COL-2 .COL-3 .COL-4

<div class=“wrapper”>
<div class=“col-1”></div>
<div class=“col-2”></div>
<div class=“col-3”></div>
<div class=“col-4”></div>
</div>
.WRAPPER

CELL/ CELL/ CELL/ CELL/


.COL-1 .COL-2 .COL-3 .COL-4

.wrapper {
display: grid;
grid-gap: 10px;
}
.WRAPPER

CELL/ CELL/ CELL/ CELL/


1 .COL-1 2 .COL-2 3 .COL-3 4 .COL-4 5

.col-1 {
grid-column: 1 / 2;
}
.col-2 {
grid-column: 2 / 3;
}
.col-3 {
grid-column: 3 / 4;
}
.col-1 {
.WRAPPER grid-column: 1 / 2;
CELL/ grid-row: 1 / 3;
.COL-2
}
.col-2 {
CELL/
grid-column: 2 / 3;
.COL-1 grid-row: 1 / 2;
CELL/
.COL-3
}
.col-3 {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
ALTERNATE SYNTAX

•  Named grid template areas (header, footer, etc):


http://gridbyexample.com/examples/#example11
REORDERING

.WRAPPER

HEADER

<div class=“wrapper”>
<header></header>
ASIDE
<article></article>
ARTICLE <aside></aside>
</div>
REORDERING

.WRAPPER

HEADER

Show code in GitHub!

ASIDE reordering.html
ARTICLE
reordering.css

https://github.com/jen4web/cssgrid
CURRENT RECOMMENDATIONS

•  Need browser support? Can’t go wrong with floats.

•  If you are OK with a few prefixes and learning


something new, Flexbox may be a reasonable interim
step.

•  PS – it’s in Bootstrap 4. Get used to it.

•  Keep waiting for CSS Grid! Coming to a browser near


you Real Soon!

You might also like