Creating layouts with CSS grids

Wed, 16 Jun 2021 09:33:01 +0000

Grids are a powerfull feature of CSS but they can be a little overwhelming at first. There are rows, columns, areas, lines, and multiple syntaxes for defining layouts. How do these concepts fit together and how to use them effectively?

In this article, we’ll go through some basic concepts of CSS grids and learn how we can use grids to build layouts. My goal is to shed some light on how to define grid areas grid lines, which I found somewhat confusing when learning CSS grids.

CSS grid by examples

Sat, 15 May 2021 09:33:01 +0000

Three column grid layout

The next example is a three column layout that could be used for example in a blog or a news site. It has a navbar and a grid that uses a automatic layout for it’s child elements.

Here’s the HTML structure we will be using

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Three column layout</title>
  </head>
  <body>
    <nav>
      <div class="title">Nav</div>
    </nav>
    <main>
      <article class="hero">
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
      <article>
        <div class="title">
          Article
        </div>
      </article>
    </main>
  </body>
</html>

In this layout we will not be using grid for the whole page. Instead we will use conventional layout method like position and margin for the navbar and positioning the grid container. We will then use a grid for the layout of the content.

Layout on dev notes

Creating layouts with CSS grids

CSS grid by examples

Three column grid layout