Responsive Grid system with Flexbox

This is my version of very generic and customisable Flexbox grid system, which is the base for creation of any type of contents layouts. This simple technique will save lot of time on testing applications across multiple screen sizes. Although the grid is flexible, it will only be useful for the interface frame. I will address this point in my next post.

How does it work?

The grid system is very similar to a table system. The main difference is that elements can be made responsive to adjust to any screen size and columns becomes rows on small screens. The components are:

Grid Container

.sb-grid {
    display: flex;
	flex: 1 1 auto; // it expands to full screen
	// height: 100%; // Use this line in you want to cover 100% of available height
	// overflow-y: auto; // this is necessary when heigh: 100%;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: stretch;
}

Rows

.sb-row {
  display: flex;
  flex: 1 1 auto; // takes full width of grid container
  flex-wrap: wrap;
  align-content: flex-start;
}

 Columns

.sb-column {
  display: flex;
  flex: 1 1 auto; // column with for default one is full with. If mor columns are added it subdivides automatically
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

Extras

Columns fix width

&.half {
	flex: 0 0 50%; // use bias 0 to fix width or 1 to resize automatically when no other column element is present
	// flex: 1 1 50%;
	// max-width: 50%; // alternative method. Using flex bias is more predictable
}
&.third {
    flex: 0 0 33.33%;
}
&.quarter {
    flex: 0 0 25%;
}
&.fifth {
    flex: 0 0 20%;
}

Responsiveness

responsiveness will transform columns into row (or 100% column)

@media (min-width: 480px) {
  .sb-grid {
    flex-direction: column;
    height: auto;
  }
  .sb-row {
    flex-wrap: nowrap;
  }
  sb-column {
    &.half {
    flex: 0 0 50%; // use bias 0 to fix width or 1 to resize automatically when no other column element is present
    }
    &.third {
      flex: 0 0 33.33%;
    }
    &.quarter {
      flex: 0 0 25%;
    }
    &.fifth {
      flex: 0 0 20%;
    }
  }
}

 

Final Result

See the Pen Responsive Flex grid system by Sebastian Bourges (@sebastianbourges) on CodePen.0

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.