Finally! Layout in CSS

Alan Stearns

About me

Alan Stearns

Computer Scientist

Web Platform

stearns@adobe.com
@alanstearns

What We're Covering

  • Flexible Box Layout
  • Grid Layout
  • Exclusions
  • Shapes
  • Regions

Five Specifications

  • First, run through the concepts of each - no code
  • Second, show you the code
  • Third, demos

Flexible Box Layout

Sane CSS Layout

One-Dimensional Layout

One

Two

Two

Three

Three

Three

Vertical centering

Flexing

1
2

Rearranging Order

A
B
C

“Holy Grail” Layout

css holy grail layout

And More

Grid Layout

Full 2D

3x3 grid

defining grid lines

  • lengths/percentages
  • based on content
  • flexing
3x3 grid

defining grid lines

  • lengths/percentages
  • based on content
  • flexing
3x3 grid with fixed columns

defining grid lines

  • lengths/percentages
  • based on content
  • flexing
3x3 grid with fixed columns and content-based heights

defining grid lines

  • lengths/percentages
  • based on content
  • flexing
3x3 grid with fixed columns, content-based heights and flexing center column

grid item placement

placing elements on a grid

grid item alignment

aligning elements within their grid placement

grid item overlap

placing an overlapping grid item

grid implementations are catching up to spec changes

Exclusions

Wrapping with Floats

float example

Wrapping anywhere with Exclusions

exclusion example

Shapes

shape examples

Regions

Define where content flows

Simple Regions example

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

lemur

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

lemur

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

Named Flows

Pull content from the normal flow and give it a label

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

lemur

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

CSS Regions

Define boxes to display the named flow content

lemur

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

lemur

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

Recap

  • Flexible Box Layout
  • Grid Layout
  • Exclusions
  • Shapes
  • Regions

Flexible Box Layout (code)

flex container


display: flex;

display: inline-flex;
    

flex container direction


flex-direction: row;
flex-direction: column;

flex-direction: row-reverse;
flex-direction: column-reverse;
    

flex container - distribution


justify-content: flex-start;
    
justify-content options

flex container - alignment


align-items: stretch;
    
align-items options

flex items


// no code required!
    

flex items - alignment


align-self: auto;
    
align-self options

flex items - order


order: <integer>;
    

flex items - flexing


flex: <positive integer>;
    

.green {
  min-width: 150px;
  flex: 1;
}
.blue {
  min-width: 150px;
  flex: 2;
}
    

flex items - flexing space


any margin property: auto;
    

.items {
  min-width: 100px;
  max-width: 150px;
  flex: 1;
}
.green,
.yellow {
  margin-left:  auto;
}
.blue {
  margin-right: auto;
}
    

Vertical Center Styling


.flex-container {
  display: flex;
}
.flex-item {
  margin: auto;
}
  
OR

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

  

Holy Grail Styling


<header>H</header>
<article>ART</article>
<nav>N</nav>
<aside>A</aside>
<footer>F</footer>
  
H
A
R
T
F

Flex Wrapper


<header>H</header>
<div class="flex-container">
  <article>ART</article>
  <nav>N</nav>
  <aside>A</aside>
</div>
<footer>F</footer>
  

.flex-container {
  display: flex;
}
  
H
A
R
T
F

Reorder Content


.flex-container {
  display: flex;
}
nav {
  order: -1;
}
  
H
A
R
T
F

Flex item min-width


.flex-container {
  display: flex;
}
.flex-container > * {
  min-width: 100px;
}
nav {
  order: -1;
}
  
H
A
R
T
F

Article flexing


.flex-container {
  display: flex;
}
.flex-container > * {
  min-width: 100px;
}
nav {
  order: -1;
}
article {
  flex: 1;
}
  
H
A
R
T
F

Grid Layout (code)

(nothing stable enough to talk about)

Exclusions (code)

create an exclusion


.exclusion {
  wrap-flow: both;
}
/* auto, both, start, end, clear, maximum, or minimum */
  
exclusion example

Shapes (code)

basic shape value syntax


  rectangle(x y width height [round rx ry]);

  circle(cx cy radius);

  ellipse(cx cy rx ry);

  polygon(x1 y1, x2 y2, ... , xn yn);
  

shapes from images

uses alpha channel path


  url("an-image.png");
  

shape-outside and shape-margin

for floats and exclusions

start with a float


.circle-float {
  float: left;
}
  
circular face

As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles.

add a shape-outside


.circle-float {
  float: left;
  shape-outside: circle(50%, 50%, 50%);
}
  
circular face

As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles. As the number of sides increases, a Polygon approximates to a Circle; and, when the number is very great indeed, say for example three or four hundred, it is extremely difficult for the most delicate touch to feel any polygonal angles.

exclusion with an ellipse


.ellipse-exclusion {
  wrap-flow: both;
  shape-outside: ellipse(50%, 50%, 90%, 30%);
}
  
ellipse exclusion

adding shape-margin


.ellipse-exclusion {
  wrap-flow: both;
  shape-outside: ellipse(50%, 50%, 90%, 30%);
  shape-margin: 10px;
}
  
ellipse exclusion with margin

Regions (code)

flow-into creates a named flow

starting markup


<article>
  <p>...
  <img>
  <p>...
</article>
  

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

lemur

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

use flow-into


<article>
  <p>...
  <img>
  <p>...
</article>
  

article > p {
  flow-into: philip;
}
  
lemur

flow-from creates regions

make some boxes


article > p {
  flow-into: philip;
}
article::before {
  display: block;
  height: 50vh;
}
article::after {
  display: block;
}
  
lemur

add flow-from


article > p {
  flow-into: philip;
}
article::before {
  flow-from: philip;
  display: block;
  height: 50vh;
}
article::after {
  flow-from: philip;
  display: block;
}
  

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

lemur

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

Change box styling


article > p {
  flow-into: philip;
}
article::before {
  flow-from: philip;
  display: block;
  height: 50vh;
  width: 50vw;
}
article::after {
  flow-from: philip;
  display: block;
}
  

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

lemur

Thus musing, he took his stand at the entrance of the gate and waited until the personage so singularly announced should make his appearance. After an instant or two he beheld the figure of a lean man, of unwholesome look, with glittering eyes and long black hair, who seemed to imitate the motion of a snake; for, instead of walking straight forward with open front, he undulated along the pavement in a curved line. It may be too fanciful to say that something, either in his moral or material aspect, suggested the idea that a miracle had been wrought by transforming a serpent into a man, but so imperfectly that the snaky nature was yet hidden, and scarcely hidden, under the mere outward guise of humanity. Herkimer remarked that his complexion had a greenish tinge over its sickly white, reminding him of a species of marble out of which he had once wrought a head of Envy, with her snaky locks.

Demos

Philip Walton’s Solved by Flexbox CJ Gammon’s Region/Shape Layout Razvan Caliman’s Adaptive UI with Named Flows