Webmasters Gallery

Don’t miss this video by Heydon that digs into CSS layouts. It’s great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox and grid help avoid the need to constantly intervene with media queries in order to affect responsive layouts.

So, in place of this…

.sidebar {
  float: left;
  width: 20rem;
}

.not-sidebar {
  float-right: calc(100% - 20rem);
}

@media (max-width: 40rem) {
  .sidebar, .not-sidebar {
    float: none;
    width: auto.
  }
}

…something like this:

/* Parent container */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  flex-basis: 20rem;
  flex-grow: 1;
}

.not-sidebar {
  min-width: 50%;
  flex-grow: 600;
}

This isn’t a one-off video either, Heydon’s channel has videos on making unusual shapes and custom properties as well.

Direct Link to Article — Permalink

The post Algorithmic Layouts appeared first on CSS-Tricks.