Bootstrap Flex Grid

Posted onby admin
  1. CSS Flexbox Layout Module. Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage; Inline, for text; Table, for two-dimensional table data.
  2. The Bootstrap 4 grid system is responsive. It will automatically adjust the columns for different screen sizes. The grid system consists of 12 columns. However, you don’t need to use all 12 columns.

The flexbox layout module is good news for web developers everywhere. The part where all major browsers now support it is even better news. A lot of fantastic resources, documentation and tutorials have sprung up lately. Solved by Flexbox is one of my favorites.

In the past I used very simple CSS float grids for website templating, but Flexbox is even better, and much simpler. In this quick tutorial, I will show you how to create an extremely simple, infinitely scalable responsive grid.

Oct 07, 2015 For this grid, we only use a few flex properties. Display: flex defines a flex container. Flex-direction: row determines the direction of each child in a flex container as left-to-right. Flex-wrap: wrap will allow a multi-line flex. Flex-basis: 100% specifies the initial main size of a flex item (100%). I have my mobile breakpoint set to 800px. Description Flex utility can be used to manage the layout, alignment, grid columns, navigation and other components of the page. It makes easy to design layout structure without using float or positioning. Flex Behaviors and Direction.

The Demo

See the Pen Easiest Flex Grid Ever.

We have semantic options for naming the tags and classes, but I'll start off with a simple row and column based naming structure, in the vein of Bootstrap, Foundation, Skeleton, and just about every other CSS framework.

Note that I'm only writing about the functional code. For the examples, I've added borders and background colors to the grid to make it easier to understand.

Bootstrap Flex Grid Example

The CSS

With only two classes - .row and .column - we can create an infinite, equally spaced grid.

Bootstrap Flex Grid Examples

A Guide to Flexbox by Chris Coyier explains Flexbox in detail. For this grid, we only use a few flex properties.

  • display: flex defines a flex container.
  • flex-direction: row determines the direction of each child in a flex container as left-to-right.
  • flex-wrap: wrap will allow a multi-line flex.
  • flex-basis: 100% specifies the initial main size of a flex item (100%).

I have my mobile breakpoint set to 800px. This grid can become more complicated and have more breakpoints, but I like to have just one for mobile/tablet (small screens) and one for desktop/laptop (large screens). Using min-width media queries is optimal for mobile first layout design.

The way this is set up, each column will have 100% width on mobile, and wrap down to the next column. On desktop, all the colums will be contained to a single line.

The HTML

In a framework like Bootstrap, the grid is based on 12 columns. A 50% width column would be written something like col-md-6. This is much simpler.

First, create a row.

Inside that row, insert a column.

This will give you one 100% wide column. Add another column.

The width of each column is 100% divided by the number of columns within the flex container (.row). Predictably, adding another with divide once again.

So far, we have equally dividing columns.

Large Screen View

Small Screen View

Css d flex

Also, the grid is infinitely nestable.

But that's only so useful. What if you want a Holy Grail layout? Or a main content with a sidebar?

Well, on the small screen view, it's still going to look the same - you still want each section to be full width. On desktop, it will be slightly different. Going with the Holy Grail example, say I want a main left sidebar that's 25% width, an advertisement sidebar on the right that's 20% width, and the 55% as the main content?

The class names can be anything, but I'm just going to name them after the percents for simplicity.

The only thing that needs to be added is the flex property inside of your min-width media query.

Large Screen View

Bootstrap Flex Container

Small Screen View

Finally, you're going to want to wrap the entire grid inside of a container so your content doesn't stretch to 3000 pixels wide on an iMac.

Semantics

Everybody loves HTML5 semantics. Why stick with divs upon divs when we have some semantically named classes we can use instead? Rows and columns are great for quick template design, but once it comes down to the final code, you want something cleaner. Read all about HTML5 semantic tags if you're not overly familiar.

HTML

main is the .container div. The main tag is only meant to be used once in a document. section has replaced the .row. article and aside are two different .column classes.

Bootstrap Flex Grid Codepen

CSS

Bootstrap D Flex

And now you have a perfectly functional, semantic layout based on flexbox!