CSS Layout: Containers, Flexbox & Grid

Containers

A readable container

max-width limits line length; auto side margins centre the container.

HTML

<h1>Down the Rabbit-Hole</h1>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>

Edit HTML

CSS

body { max-width: 700px; margin: 0 auto; padding: 24px; }

Edit CSS

Try this → Reduce max-width to 400px.

Columns

Newspaper columns

Multi-column layout flows continuous text between columns. This is different from a grid of independent items.

HTML

<div class="columns"><p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do. Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do. Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p></div>

Edit HTML

CSS

.columns { columns: 2; column-gap: 24px; }

Edit CSS

Try this → Try three columns, then return to one.

Flexbox

Flexbox arranges content along one main axis. Wrap handles extra items.

HTML

<div class="layout">
  <div>HTML</div>
  <div>CSS</div>
  <div>TYPE</div>
</div>

Edit HTML

CSS

.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

Edit CSS

Try this → Change justify-content to center and add align-items: center.

Grid and gap

CSS Grid

Grid defines rows and columns. minmax(0, 1fr) permits shrinking tracks.

HTML

<div class="layout">
  <div>HTML</div>
  <div>CSS</div>
  <div>TYPE</div>
</div>

Edit HTML

CSS

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.layout div { padding: 24px; background: #7FFF00; }

Edit CSS

Try this → Edit repeat(3, ...) to repeat(2, ...), then change gap to 32px.

Position and stacking

Positioning and z-index

Absolute positioning uses the nearest positioned ancestor. z-index controls stacking within stacking contexts.

HTML

<div class="layout">
  <div>HTML</div>
  <div>CSS</div>
  <div>TYPE</div>
</div>

Edit HTML

CSS

.layout { position: relative; height: 140px; }
.layout div { position: absolute; padding: 20px; background: #7FFF00; }
.layout div:nth-child(2) { left: 50px; top: 30px; z-index: 2; background: #FF1493; }

Edit CSS

Try this → Move the second item and lower its z-index.