Home > Designing, Others > Algorithmic Layouts

Algorithmic Layouts

January 10th, 2019 Leave a comment Go to comments

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 ArticlePermalink

The post Algorithmic Layouts appeared first on CSS-Tricks.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.