Grid Layout makes two-dimensional layouts easy (easier).
A grid contains items arranged in columns and rows
<section>
<img src="image001.jpg" alt="…" />
<img src="image002.jpg" alt="…" />
<img src="image003.jpg" alt="…" />
<img src="image004.jpg" alt="…" />
…
</section>
section {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
<main>
<p>
Lorem ipsum dolor sit amet
</p>
<p>
consectetur adipiscing elit
</p>
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p>
Ut enim ad minim veniam
</p>
<p>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate
</p>
</main>
main {
display: grid;
grid-template-columns: 1fr 2fr;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
<body>
<header>
…
</header>
<nav>
…
</nav>
<main>
…
</main>
<footer>
…
</footer>
</body>
body {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas: "top top"
"middle-left middle-right"
"bottom bottom"
}
header {
grid-area: top;
}
nav {
grid-area: middle-left;
}
main {
grid-area: middle-right;
}
footer {
grid-area: bottom;
}