reveal.js

You only need:

a little MDN...
MDN

Lets start...

<div class="container">
	<div>A</div>
	<div>B</div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
</div>

.container {
	display: grid;
}
.container > div {
	background: lightgreen;
	text-align: center;
}

...add some positioning...

 .container {
	display: grid;
	grid-template-rows: 1fr 1fr;
	/* or values in px, em, %... */
	grid-template-columns: 1fr 1fr 1fr;
	/* or we can use ": repeat(3, 1fr)" */
}

...and borders:

 .container {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 2vw;
}

Lets try something useful:

HTML:

body>
	<header>Header</header>
	<article>Article</article>
	<nav>Navigation</nav>
	<footer>Footer</footer>
/body>

CSS - container:

body {
	display: grid;
	grid-template-areas: 
		"header header"
		"nav article"
		"footer footer";
	grid-template-rows: 60px 1fr 60px;
	grid-template-columns: 15% 1fr;
	height: 100vh;
}

CSS - elements:

 header {
	background-color: lightcoral;
	grid-area: header;
}
nav {
	background-color: lightblue;
	grid-area: nav;
}
article {
	background-color: lightgreen;
	grid-area: article;
}
footer {
	background-color: lightpink;
	grid-area: footer;
}

CSS - alt container:

body {
	display: grid;
	grid-template: 
		"header header"  60px
		"nav    article" 1fr
		"footer footer"  60px
		/ 15%    1fr;
	height: 100vh;
}

	@media only screen and (max-width: 768px) {
	body {
	grid-template:
	"header nav" 60px
	"article article" 1fr
	"footer footer" 60px
	/ 1fr 1fr;
	}

	@media only screen and (max-width: 320px) {
	body {
	grid-template:
	"header" 60px
	"nav" 60px
	"article" 1fr
	"footer" 60px
	/ 1fr;
	}

	.container {
	display: grid;
	grid-template-rows: 1fr 1fr;
	/* or values in px, em, %... */
	grid-template-columns: 1fr 1fr 1fr;
	/* or we can use ": repeat(3, 1fr)" */
	}

	header {
	background-color: lightcoral;
	grid-area: header;
	}
	nav {
	background-color: lightblue;
	grid-area: nav;
	}
	article {
	background-color: lightgreen;
	grid-area: article;
	}
	footer {
	background-color: lightpink;
	grid-area: footer;
	}

	body {
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template:
	"header header" 60px
	"nav article" 1fr
	"footer footer" 60px
	/ 15% 1fr;
	height: 100vh;
	}