(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.data-privacy-src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1596564-1', 'auto'); ga('send', 'pageview');
Home » NewsBlog » Algorithmic Layouts

Algorithmic Layouts

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.

CSS Tricks Go to Source

Chris Coyier

Powered by WPeMatico

2019-01-11T03:04:53+00:00January 11th, 2019|Categories: News, Tutorials|Tags: |
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok