diff --git a/404.php b/404.php
index ba5d537a09..70f199dff8 100644
--- a/404.php
+++ b/404.php
@@ -10,16 +10,15 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
-		<main id="main" class="site-main">
+	<main id="primary" class="site-main">
 
-			<section class="error-404 not-found">
-				<header class="page-header">
-					<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', '_s' ); ?></h1>
-				</header><!-- .page-header -->
+		<section class="error-404 not-found">
+			<header class="page-header">
+				<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', '_s' ); ?></h1>
+			</header><!-- .page-header -->
 
-				<div class="page-content">
-					<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', '_s' ); ?></p>
+			<div class="page-content">
+				<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', '_s' ); ?></p>
 
 					<?php
 					get_search_form();
@@ -52,11 +51,10 @@
 					the_widget( 'WP_Widget_Tag_Cloud' );
 					?>
 
-				</div><!-- .page-content -->
-			</section><!-- .error-404 -->
+			</div><!-- .page-content -->
+		</section><!-- .error-404 -->
 
-		</main><!-- #main -->
-	</div><!-- #primary -->
+	</main><!-- #main -->
 
 <?php
 get_footer();
diff --git a/README.md b/README.md
index 9239747f20..a88285a8e4 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s
 * Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication.
 * Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
 * A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
-* 2 sample CSS layouts in `layouts/` for a sidebar on either side of your content.
+* 2 sample CSS layouts in `layouts/` made using CSS Grid Layout Module for a sidebar on either side of your content.
 Note: `.no-sidebar` styles are not automatically loaded.
 * Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
 * Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.
diff --git a/archive.php b/archive.php
index db1313f3a5..fae599bd2c 100644
--- a/archive.php
+++ b/archive.php
@@ -10,8 +10,7 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
-		<main id="main" class="site-main">
+	<main id="primary" class="site-main">
 
 		<?php if ( have_posts() ) : ?>
 
@@ -45,8 +44,7 @@
 		endif;
 		?>
 
-		</main><!-- #main -->
-	</div><!-- #primary -->
+	</main><!-- #main -->
 
 <?php
 get_sidebar();
diff --git a/footer.php b/footer.php
index 9c0a099ef9..37fcb0f407 100644
--- a/footer.php
+++ b/footer.php
@@ -11,8 +11,6 @@
 
 ?>
 
-	</div><!-- #content -->
-
 	<footer id="colophon" class="site-footer">
 		<div class="site-info">
 			<a href="<?php echo esc_url( __( 'https://wordpress.org/', '_s' ) ); ?>">
diff --git a/header.php b/header.php
index 527ab38b16..7bcd7cf066 100644
--- a/header.php
+++ b/header.php
@@ -23,7 +23,7 @@
 <body <?php body_class(); ?>>
 <?php wp_body_open(); ?>
 <div id="page" class="site">
-	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', '_s' ); ?></a>
+	<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', '_s' ); ?></a>
 
 	<header id="masthead" class="site-header">
 		<div class="site-branding">
@@ -57,5 +57,3 @@
 			?>
 		</nav><!-- #site-navigation -->
 	</header><!-- #masthead -->
-
-	<div id="content" class="site-content">
diff --git a/inc/woocommerce.php b/inc/woocommerce.php
index 8a3a8b9dc8..e900ab6c1d 100644
--- a/inc/woocommerce.php
+++ b/inc/woocommerce.php
@@ -118,9 +118,8 @@ function _s_woocommerce_related_products_args( $args ) {
 	 */
 	function _s_woocommerce_wrapper_before() {
 		?>
-		<div id="primary" class="content-area">
-			<main id="main" class="site-main">
-			<?php
+			<main id="primary" class="site-main">
+		<?php
 	}
 }
 add_action( 'woocommerce_before_main_content', '_s_woocommerce_wrapper_before' );
@@ -136,7 +135,6 @@ function _s_woocommerce_wrapper_before() {
 	function _s_woocommerce_wrapper_after() {
 		?>
 			</main><!-- #main -->
-		</div><!-- #primary -->
 		<?php
 	}
 }
diff --git a/index.php b/index.php
index cf3c487a81..1826605a4e 100644
--- a/index.php
+++ b/index.php
@@ -15,8 +15,7 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
-		<main id="main" class="site-main">
+	<main id="primary" class="site-main">
 
 		<?php
 		if ( have_posts() ) :
@@ -51,8 +50,7 @@
 		endif;
 		?>
 
-		</main><!-- #main -->
-	</div><!-- #primary -->
+	</main><!-- #main -->
 
 <?php
 get_sidebar();
diff --git a/layouts/content-sidebar.css b/layouts/content-sidebar.css
index 60b85d0ba4..e1202a550d 100644
--- a/layouts/content-sidebar.css
+++ b/layouts/content-sidebar.css
@@ -6,22 +6,26 @@
  * Learn more: https://developer.wordpress.org/themes/basics/template-files/
 */
 
-.content-area {
-	float: left;
-	margin: 0 -25% 0 0;
-	width: 100%;
+.site {
+	display: grid;
+	grid-template-columns: auto 25%;
+	grid-template-areas:
+		"header header"
+		"main sidebar"
+		"footer footer";
+}
+.site-header {
+	grid-area: header;
 }
 .site-main {
-	margin: 0 25% 0 0;
+	grid-area: main;
+	overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
 }
-.site-content .widget-area {
-	float: right;
-	overflow: hidden;
-	width: 25%;
+.widget-area {
+	grid-area: sidebar;
 }
 .site-footer {
-	clear: both;
-	width: 100%;
+	grid-area: footer;
 }
 
 .no-sidebar .content-area {
diff --git a/layouts/sidebar-content.css b/layouts/sidebar-content.css
index 0dda00ee47..0d1f8eed9e 100644
--- a/layouts/sidebar-content.css
+++ b/layouts/sidebar-content.css
@@ -6,22 +6,26 @@
  * Learn more: https://developer.wordpress.org/themes/basics/template-files/
 */
 
-.content-area {
-	float: right;
-	margin: 0 0 0 -25%;
-	width: 100%;
+.site {
+	display: grid;
+	grid-template-columns: 25% auto;
+	grid-template-areas:
+		"header header"
+		"sidebar main"
+		"footer footer";
+}
+.site-header {
+	grid-area: header;
 }
 .site-main {
-	margin: 0 0 0 25%;
+	grid-area: main;
+	overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
 }
-.site-content .widget-area {
-	float: left;
-	overflow: hidden;
-	width: 25%;
+.widget-area {
+	grid-area: sidebar;
 }
 .site-footer {
-	clear: both;
-	width: 100%;
+	grid-area: footer;
 }
 
 .no-sidebar .content-area {
diff --git a/page.php b/page.php
index 9c84067366..25fc0d13e9 100644
--- a/page.php
+++ b/page.php
@@ -15,8 +15,7 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
-		<main id="main" class="site-main">
+	<main id="primary" class="site-main">
 
 		<?php
 		while ( have_posts() ) :
@@ -32,8 +31,7 @@
 		endwhile; // End of the loop.
 		?>
 
-		</main><!-- #main -->
-	</div><!-- #primary -->
+	</main><!-- #main -->
 
 <?php
 get_sidebar();
diff --git a/sass/layout/_content-sidebar.scss b/sass/layout/_content-sidebar.scss
index 507cc5951e..760d241a82 100644
--- a/sass/layout/_content-sidebar.scss
+++ b/sass/layout/_content-sidebar.scss
@@ -1,22 +1,27 @@
-.content-area {
-	float: left;
-	margin: 0 (-$size__site-sidebar) 0 0;
-	width: $size__site-main;
+.site {
+	display: grid;
+	grid-template-columns: auto ($size__site-sidebar);
+	grid-template-areas:
+		"header header"
+		"main sidebar"
+		"footer footer";
+}
+
+.site-header {
+	grid-area: header;
 }
 
 .site-main {
-	margin: 0 $size__site-sidebar 0 0;
+	grid-area: main;
+	overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
 }
 
-.site-content .widget-area {
-	float: right;
-	overflow: hidden;
-	width: $size__site-sidebar;
+.widget-area {
+	grid-area: sidebar;
 }
 
 .site-footer {
-	clear: both;
-	width: $size__site-main;
+	grid-area: footer;
 }
 
 @import "no-sidebar";
diff --git a/sass/layout/_sidebar-content.scss b/sass/layout/_sidebar-content.scss
index e765590e8b..ec312c1084 100644
--- a/sass/layout/_sidebar-content.scss
+++ b/sass/layout/_sidebar-content.scss
@@ -1,22 +1,27 @@
-.content-area {
-	float: right;
-	margin: 0 0 0 (-$size__site-sidebar);
-	width: $size__site-main;
+.site {
+	display: grid;
+	grid-template-columns: ($size__site-sidebar) auto;
+	grid-template-areas:
+		"header header"
+		"sidebar main"
+		"footer footer";
+}
+
+.site-header {
+	grid-area: header;
 }
 
 .site-main {
-	margin: 0 0 0 $size__site-sidebar;
+	grid-area: main;
+	overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
 }
 
-.site-content .widget-area {
-	float: left;
-	overflow: hidden;
-	width: $size__site-sidebar;
+.widget-area {
+	grid-area: sidebar;
 }
 
 .site-footer {
-	clear: both;
-	width: $size__site-main;
+	grid-area: footer;
 }
 
 @import "no-sidebar";
diff --git a/sass/mixins/_mixins-master.scss b/sass/mixins/_mixins-master.scss
index 54ff533626..41155be0a1 100644
--- a/sass/mixins/_mixins-master.scss
+++ b/sass/mixins/_mixins-master.scss
@@ -11,18 +11,6 @@
 	margin-right: auto;
 }
 
-// Clearfix
-@mixin clearfix() {
-	content: "";
-	display: table;
-	table-layout: fixed;
-}
-
-// Clear after (not all clearfix need this also)
-@mixin clearfix-after() {
-	clear: both;
-}
-
 // Column width with margin
 @mixin column-width($numberColumns: 3) {
 	width: map-get($columns, $numberColumns) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns );
diff --git a/sass/modules/_accessibility.scss b/sass/modules/_accessibility.scss
index b935555ba6..b93d15bdac 100644
--- a/sass/modules/_accessibility.scss
+++ b/sass/modules/_accessibility.scss
@@ -35,6 +35,6 @@
 }
 
 /* Do not show the outline on the skip link target. */
-#content[tabindex="-1"]:focus {
+#primary[tabindex="-1"]:focus {
 	outline: 0;
 }
diff --git a/sass/modules/_clearings.scss b/sass/modules/_clearings.scss
deleted file mode 100644
index 7654d76926..0000000000
--- a/sass/modules/_clearings.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.clear,
-.entry-content,
-.comment-content,
-.site-header,
-.site-content,
-.site-footer {
-
-	&::before,
-	&::after {
-
-		@include clearfix;
-	}
-
-	&::after {
-
-		@include clearfix-after;
-	}
-}
diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss
index d88b0a6895..33a526dad7 100644
--- a/sass/navigation/_menus.scss
+++ b/sass/navigation/_menus.scss
@@ -1,7 +1,5 @@
 .main-navigation {
-	clear: both;
 	display: block;
-	float: left;
 	width: 100%;
 
 	ul {
@@ -27,7 +25,8 @@
 
 				&:hover > ul,
 				&.focus > ul {
-					left: 100%;
+					display: block;
+					left: auto;
 				}
 			}
 
@@ -51,7 +50,6 @@
 	}
 
 	li {
-		float: left;
 		position: relative;
 
 		&:hover > a,
@@ -84,7 +82,7 @@
 	}
 
 	.main-navigation ul {
-		display: block;
+		display: flex;
 	}
 }
 
@@ -94,17 +92,18 @@
 
 	.site-main & {
 		margin: 0 0 1.5em;
-		overflow: hidden;
+	}
+
+	.nav-links {
+		display: flex;
 	}
 
 	.nav-previous {
-		float: left;
-		width: 50%;
+		flex: 1 0 50%;
 	}
 
 	.nav-next {
-		float: right;
-		text-align: right;
-		width: 50%;
+		text-align: end;
+		flex: 1 0 50%;
 	}
 }
diff --git a/sass/shop/_components.scss b/sass/shop/_components.scss
index 9a4633d750..a995d0486c 100644
--- a/sass/shop/_components.scss
+++ b/sass/shop/_components.scss
@@ -6,8 +6,6 @@
 	margin: 0;
 	padding: 0;
 
-	@include clearfix;
-
 	.cart-contents {
 		text-decoration: none;
 	}
@@ -226,8 +224,6 @@ p.stars {
 .woocommerce-error,
 .woocommerce-noreviews,
 p.no-comments {
-
-	@include clearfix;
 	background-color: $woocommerce__color-success;
 	clear: both;
 }
diff --git a/sass/shop/_products.scss b/sass/shop/_products.scss
index 5d39372ea8..7ff3bfe406 100644
--- a/sass/shop/_products.scss
+++ b/sass/shop/_products.scss
@@ -1,6 +1,4 @@
 ul.products {
-
-	@include clearfix;
 	margin: 0;
 	padding: 0;
 
diff --git a/sass/shop/_single-product.scss b/sass/shop/_single-product.scss
index e8bb867674..5451340358 100644
--- a/sass/shop/_single-product.scss
+++ b/sass/shop/_single-product.scss
@@ -1,8 +1,6 @@
 .single-product {
 
 	div.product {
-
-		@include clearfix;
 		position: relative;
 
 		.woocommerce-product-gallery {
@@ -22,8 +20,6 @@
 			}
 
 			.flex-control-thumbs {
-
-				@include clearfix;
 				margin: 0;
 				padding: 0;
 
diff --git a/sass/style.scss b/sass/style.scss
index 445764d21b..0344f4cece 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -32,7 +32,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 	## Menus
 # Accessibility
 # Alignments
-# Clearings
 # Widgets
 # Content
 	## Posts and pages
@@ -80,11 +79,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 --------------------------------------------------------------*/
 @import "modules/alignments";
 
-/*--------------------------------------------------------------
-# Clearings
---------------------------------------------------------------*/
-@import "modules/clearings";
-
 /*--------------------------------------------------------------
 # Widgets
 --------------------------------------------------------------*/
diff --git a/search.php b/search.php
index d091426673..eafd37376a 100644
--- a/search.php
+++ b/search.php
@@ -10,8 +10,7 @@
 get_header();
 ?>
 
-	<section id="primary" class="content-area">
-		<main id="main" class="site-main">
+	<main id="primary" class="site-main">
 
 		<?php if ( have_posts() ) : ?>
 
@@ -47,8 +46,7 @@
 		endif;
 		?>
 
-		</main><!-- #main -->
-	</section><!-- #primary -->
+	</main><!-- #main -->
 
 <?php
 get_sidebar();
diff --git a/single.php b/single.php
index 86319dc2ad..bd982141df 100644
--- a/single.php
+++ b/single.php
@@ -10,8 +10,7 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
-		<main id="main" class="site-main">
+	<main id="primary" class="site-main">
 
 		<?php
 		while ( have_posts() ) :
@@ -34,8 +33,7 @@
 		endwhile; // End of the loop.
 		?>
 
-		</main><!-- #main -->
-	</div><!-- #primary -->
+	</main><!-- #main -->
 
 <?php
 get_sidebar();
diff --git a/style-rtl.css b/style-rtl.css
index 7aae515e62..a1484cb903 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -32,7 +32,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 	## Menus
 # Accessibility
 # Alignments
-# Clearings
 # Widgets
 # Content
 	## Posts and pages
@@ -626,9 +625,7 @@ a:active {
 ## Menus
 --------------------------------------------------------------*/
 .main-navigation {
-	clear: both;
 	display: block;
-	float: right;
 	width: 100%;
 }
 
@@ -655,7 +652,8 @@ a:active {
 
 .main-navigation ul ul li:hover > ul,
 .main-navigation ul ul li.focus > ul {
-	right: 100%;
+	display: block;
+	right: auto;
 }
 
 .main-navigation ul ul a {
@@ -668,7 +666,6 @@ a:active {
 }
 
 .main-navigation li {
-	float: right;
 	position: relative;
 }
 
@@ -690,7 +687,7 @@ a:active {
 	}
 
 	.main-navigation ul {
-		display: block;
+		display: flex;
 	}
 }
 
@@ -700,22 +697,25 @@ a:active {
 .site-main
 .post-navigation {
 	margin: 0 0 1.5em;
-	overflow: hidden;
+}
+
+.comment-navigation .nav-links,
+.posts-navigation .nav-links,
+.post-navigation .nav-links {
+	display: flex;
 }
 
 .comment-navigation .nav-previous,
 .posts-navigation .nav-previous,
 .post-navigation .nav-previous {
-	float: right;
-	width: 50%;
+	flex: 1 0 50%;
 }
 
 .comment-navigation .nav-next,
 .posts-navigation .nav-next,
 .post-navigation .nav-next {
-	float: left;
-	text-align: left;
-	width: 50%;
+	text-align: end;
+	flex: 1 0 50%;
 }
 
 /*--------------------------------------------------------------
@@ -758,7 +758,7 @@ a:active {
 }
 
 /* Do not show the outline on the skip link target. */
-#content[tabindex="-1"]:focus {
+#primary[tabindex="-1"]:focus {
 	outline: 0;
 }
 
@@ -787,35 +787,6 @@ a:active {
 	margin-bottom: 1.5em;
 }
 
-/*--------------------------------------------------------------
-# Clearings
---------------------------------------------------------------*/
-.clear::before,
-.clear::after,
-.entry-content::before,
-.entry-content::after,
-.comment-content::before,
-.comment-content::after,
-.site-header::before,
-.site-header::after,
-.site-content::before,
-.site-content::after,
-.site-footer::before,
-.site-footer::after {
-	content: "";
-	display: table;
-	table-layout: fixed;
-}
-
-.clear::after,
-.entry-content::after,
-.comment-content::after,
-.site-header::after,
-.site-content::after,
-.site-footer::after {
-	clear: both;
-}
-
 /*--------------------------------------------------------------
 # Widgets
 --------------------------------------------------------------*/
diff --git a/style.css b/style.css
index ca1e0eafd6..22c5bb0ea3 100644
--- a/style.css
+++ b/style.css
@@ -32,7 +32,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 	## Menus
 # Accessibility
 # Alignments
-# Clearings
 # Widgets
 # Content
 	## Posts and pages
@@ -626,9 +625,7 @@ a:active {
 ## Menus
 --------------------------------------------------------------*/
 .main-navigation {
-	clear: both;
 	display: block;
-	float: left;
 	width: 100%;
 }
 
@@ -655,7 +652,8 @@ a:active {
 
 .main-navigation ul ul li:hover > ul,
 .main-navigation ul ul li.focus > ul {
-	left: 100%;
+	display: block;
+	left: auto;
 }
 
 .main-navigation ul ul a {
@@ -668,7 +666,6 @@ a:active {
 }
 
 .main-navigation li {
-	float: left;
 	position: relative;
 }
 
@@ -690,7 +687,7 @@ a:active {
 	}
 
 	.main-navigation ul {
-		display: block;
+		display: flex;
 	}
 }
 
@@ -700,22 +697,25 @@ a:active {
 .site-main
 .post-navigation {
 	margin: 0 0 1.5em;
-	overflow: hidden;
+}
+
+.comment-navigation .nav-links,
+.posts-navigation .nav-links,
+.post-navigation .nav-links {
+	display: flex;
 }
 
 .comment-navigation .nav-previous,
 .posts-navigation .nav-previous,
 .post-navigation .nav-previous {
-	float: left;
-	width: 50%;
+	flex: 1 0 50%;
 }
 
 .comment-navigation .nav-next,
 .posts-navigation .nav-next,
 .post-navigation .nav-next {
-	float: right;
-	text-align: right;
-	width: 50%;
+	text-align: end;
+	flex: 1 0 50%;
 }
 
 /*--------------------------------------------------------------
@@ -758,7 +758,7 @@ a:active {
 }
 
 /* Do not show the outline on the skip link target. */
-#content[tabindex="-1"]:focus {
+#primary[tabindex="-1"]:focus {
 	outline: 0;
 }
 
@@ -787,35 +787,6 @@ a:active {
 	margin-bottom: 1.5em;
 }
 
-/*--------------------------------------------------------------
-# Clearings
---------------------------------------------------------------*/
-.clear::before,
-.clear::after,
-.entry-content::before,
-.entry-content::after,
-.comment-content::before,
-.comment-content::after,
-.site-header::before,
-.site-header::after,
-.site-content::before,
-.site-content::after,
-.site-footer::before,
-.site-footer::after {
-	content: "";
-	display: table;
-	table-layout: fixed;
-}
-
-.clear::after,
-.entry-content::after,
-.comment-content::after,
-.site-header::after,
-.site-content::after,
-.site-footer::after {
-	clear: both;
-}
-
 /*--------------------------------------------------------------
 # Widgets
 --------------------------------------------------------------*/
diff --git a/woocommerce.css b/woocommerce.css
index 0d5c41b67f..7153d55949 100644
--- a/woocommerce.css
+++ b/woocommerce.css
@@ -72,9 +72,6 @@ table.shop_table_responsive tr td.download-actions .button {
  * Products
  */
 ul.products {
-	content: "";
-	display: table;
-	table-layout: fixed;
 	margin: 0;
 	padding: 0;
 }
@@ -143,9 +140,6 @@ ul.products li.product .button {
  * Single product
  */
 .single-product div.product {
-	content: "";
-	display: table;
-	table-layout: fixed;
 	position: relative;
 }
 
@@ -167,9 +161,6 @@ ul.products li.product .button {
 }
 
 .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
-	content: "";
-	display: table;
-	table-layout: fixed;
 	margin: 0;
 	padding: 0;
 }
@@ -284,9 +275,6 @@ ul.products li.product .button {
 	position: relative;
 	margin: 0;
 	padding: 0;
-	content: "";
-	display: table;
-	table-layout: fixed;
 }
 
 .site-header-cart .cart-contents {
@@ -469,9 +457,6 @@ p.stars.selected a:not(.active)::before {
 .woocommerce-error,
 .woocommerce-noreviews,
 p.no-comments {
-	content: "";
-	display: table;
-	table-layout: fixed;
 	background-color: #0f834d;
 	clear: both;
 }
