holy grail flexbox layout code example

Example 1: holy grail flexbox layout

/**
 * Make body at least 100% height
 * You can also use a combination
 * of height: 100% in <html> and
 * min-height: 100% in <body>.
 */
.holy-grail {
	min-height: 100vh;
}

/**
 * Let's do a column distribution
 * (mobile first)
 * flex value is 1 1 auto to make
 * body skrinkable and extensible
 */
.holy-grail,
.holy-grail-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/**
 * Content body item is made
 * extensible too.
 */
.holy-grail-content {
	flex: 1 1 auto;
}

/**
 * Put the first sidebar before content.
 * If you need sidebar to be before content
 * only in big screen put those 3 next lines
 * in @media block.
 */
.holy-grail-sidebar-1 {
	order: -1;
}

/**
 * Let's introduce bigger screen
 */

@media (min-width: 768px) {
	/**
	 * Body items are now side by side
	 */
	.holy-grail-body {
		flex-direction: row;
	}

	/**
	 * Sidebars have a basic 260 width
	 * and are not really flexible anymore
	 */
	.hg-sidebar {
		flex: 0 0 260px;
	}
}

Example 2: holy grail flexbox layout

<body class="holy-grail">
	<header>
		<!-- header content -->
	</header>

	<div class="holy-grail-body">

		<section class="holy-grail-content">
			<!-- Main page content -->
		</section>

		<div class="holy-grail-sidebar-1 hg-sidebar">
			<!-- sidebar 1 content -->
		</div>

		<div class="holy-grail-sidebar-2 hg-sidebar">
			<!-- sidebar 2 content -->
		</div>

	</div>

	<footer>
		<!-- footer content -->
	</footer>
</body>

Tags:

Misc Example

Recent Posts