Web Layout

Tables

• Tables are not meant for layouts
• Unfriendly with screen readers
• Fixed width

Floats

CSS Floats were created to imitate print layout counterparts

Floats

<p>...
<img class="float-left" src="...">
...</p>

.float-left {
  float: left;
}

.wrapper {
  border: 4px solid black;
}
.main-content {
  background-color: blue;
}
.sidebar {
  background-color: red;
}

.wrapper {
  border: 4px solid black;
}
.main-content {
  background-color: blue;
  float: left;
}
.sidebar {
  background-color: red;
  float: right;
}

.wrapper {
  border: 4px solid black;
}
.main-content {
  background-color: blue;
  float: left;
}
.sidebar {
  background-color: red;
  float: right;
}
.clearfix::after {
  display: block;
  content: '';
  clear: both;
}

inline-block

.wrapper {
  text-align: center;
}
.item {
  display: inline-block;
}

Grid container

Elements containing a grid, defined by setting display: grid

<main class="wrapper">
  ﹤header class="main-header"﹥﹤/header﹥
  ﹤div class="main-content"﹥﹤/div﹥
  ﹤div class="other-content"﹥﹤/div﹥
  ﹤aside class="sidebar"﹥﹤/aside﹥
  ﹤footer class="main-footer"﹥﹤/footer﹥
</main>

.wrapper {
  display: grid;
}

Grid item

direct children of grid container

﹤main class="wrapper"﹥
  <header class="main-header"></header>
  <div class="main-content"></div>
  <div class="other-content"></div>
  <aside class="sidebar"></aside>
  <footer class="main-footer"></footer>
﹤/main﹥

(Here: grid items are children of main.wrapper)

Grid line

Invisible lines divide the grid into sections.

Grid lines order respect writing direction

Grid lines are 1-based!

Grid track

A grid track is the space between any two lines on the grid.

Grid tracks are content rows and columns

Grid track

Defined at container:

.wrapper {
  display: grid;
  grid-template-columns:
    1fr 1fr 1fr 1fr;
  grid-template-rows:
    1fr 1fr 1fr 1fr;
}

Grid cell

Intersection between grid row and grid column. Conceptually it is like a table cell.

Grid cell

Grid items are auto placed in cells with the order of grid lines.

Rows are implicitly inserted if there are more items than cells.

Grid cell

Or they can be manually placed with:

.cell {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Grid area

Rectangular area between 4 grid lines.

.area {
  grid-column: 1 / 4;
  grid-row: 2 / span 2; /*(1)*/
}

Grid gap

Gutters or empty spaces between grid tracks

.wrapper {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  grid-gap: 10px;
}

CSS Grid

• Multi-dimension & layout-in approach
• More intuitive and easier to learn
• No more grid framework and fixed grid system

.wrapper {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar";
}
.header { grid-area: header; }
.content { grid-area: content; }
.sidebar { grid-area: sidebar; }

@media (min-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr 2fr 2fr;
    grid-template-areas:
      "....... header  header"
      "sidebar content content";
  }
}