CSS Flexbox vs Grid - Which One Should I Use?

CSS Flexbox vs Grid - Which One Should I Use?

When I first discovered Bootstrap years ago I was pretty excited about how much that framework empowered my front end developer inner-child. A lot of us developers had written our own frameworks - and were proud of them, so we shared them - but quickly lamented the effort involved in maintaining, patching and responding to browser updates. 12 columns, mobile ready, consistent stying.... Bootstrap felt natural. A little too natural....

Not long after feeling all that goodness I thought (quietly), "Why doesn't the browser just do this?"

I get it, when I worked at Microsoft I got a first hand look at some of that browser code, and it has a heavy load to lift, no question about it. And sure enough, Twitter's Bootstrap spawned other front end frameworks (Foundation, Semantic, that Yahoo library....), so now during interviews I had to be aware of yet other frameworks and possibly work with/against/for them.

I appreciated Bootstrap's grid system, all of those helper classes and it's affinity towards the mobile platform. But no matter what project I used Bootstrap for it seemed I was always gutting the styles (nobody wanted someone to look at their new site creation and immediatley respond with, "I see you used Bootstrap....") and just running with the core so that I could build out my project from there.

I liked, and continue to like Bootstrap so don't send me any hate mail (you'll hurt my feelings). Remember, if you ask 10 developers what their favorite framework is, you'll get 11 answers (they're not always good at math....) But I silently kept asking myself, "when will the browsers just do these Bootstrap-esque things?"

Flexbox and Grid. Ta. Da.

With Flexbox and Grid, the browser now "just does it", better than a Nike commercial. I have my grids, page level layouts, component level layouts, progressive page layout support - all without having to add any additional Javascript libraries to my pages, the browser just does it. Yeah I'm a happy guy. And it's really easy to use too. The following long-winded example shows what I really dig about Grid so far. For giggles you can copy everything from lines 1 through 92 and paste it into a blank html page. Save and load into your browser.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>NEWRICH</title>

<style>
body{
	color:white;
	text-align:center;	
}

#content{
		display:grid;
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: minmax(100px;auto);
		max-width:960px;
		margin:0 auto;
		grid-gap:10px;
		grid-template-areas:
		"header header header header header header header header header header header header"
		"nav nav nav nav nav nav nav nav nav nav nav nav"
		"main main main main main main main main main main main main"
		"main main main main main main main main main main main main"
		"aside aside aside aside aside aside aside aside aside aside aside aside"
		"footer footer footer footer footer footer footer footer footer footer footer footer";
	}

@media screen and (min-width:760px){
	#content{
		display:grid;
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: minmax(100px, auto);
		max-width:960px;
		margin:0 auto;
		grid-gap:10px;
		grid-template-areas:
		"header header header header header header header header header header header header"
		"nav nav nav nav nav nav nav nav nav nav nav nav"
		"aside main main main main main main main main main main main"
		"aside main main main main main main main main main main main"
		"footer footer footer footer footer footer footer footer footer footer footer footer";
	}
}

#content > * {
	background:#3bbced;
	padding:10px;
}

aside{
	grid-area:aside;	
}

header{
	grid-area:header;	
	}
nav{
	grid-area:nav;	
}
main{
	grid-area:main;	
}
footer{
	grid-area:footer;
}

/*flex CSS here */
headerNav {
    display:flex;
}  

headerNav > div {
    padding-left:10px;
}
headerNav > div:nth-child(3) {
    margin-left:auto;
}   
 
</style>
</head>

<body>
	<div id="content">
		<aside> Aside </aside>
		<header>
            <headerNav>
                <div> Home </div>
                <div> Search </div>
                <div> Contact </div>
            </headerNav>
        </header>
		<nav> Nav </nav>
		<main> Main </main>
		<footer> Footer </footer>
	</div>
</body>
</html>

Since everybody's all up on the mobile-first bandwagon I'll just refer to the content class inside the media query on line 29.

On line 31 I define display:grid which tells the browser to use Grid for layout in that div. No included .css or .js files - that one css rule makes all the magic happen.

grid-template-columns uses these things called "fractionals" as even units of measure across a column (I defined my own 12 column layout - line 32). grid-auto-rows dynamically defines row size, hardcoding with the first value and then automatically using the remainder with the value of auto (line 33). grid-gap says how much room should be used in between the grid areas.

Line 37: grid-template-areas. Each grid template area corresponds to a HTML element that you define in the CSS (starting on line 51).

Finally on line 84 the actual HTML layout is defined and all of the grid areas are laid out neatly on the page.

The brilliance of this? The grid areas are referenced by name in the HTML structure, as supplied by the CSS. If you want to, let's say, swap the header and the footer on the page, you only need to do it on lines 56 and 65 in the grid-area: value. Swap the values there and you can change the entire layout of your page, just like that!

Flexbox code was introduced to me as an easy way to build out one dimensional elements like menus. Line 70 calls display:flex which easily takes the child elements out of the stacking order and puts them onto a horizontal display space (remember all of the CSS it took to format <li>?) On line 87 you can see the few lines of CSS to style the headerNav and its containing divs. To demonstrate how easily you can manipulate individual child elements I moved the Contact div in the header to the right.

Flexbox and Grid play nicely together.

So which one should you use, Flexbox or Grid?

Both. You'll use them both.

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/css/css-flexbox-vs-grid-which-one-should-i-use/
Copyright 2018. All Rights Reserved.