CSS-grid is a popular and cleaner way of creating complex HTML and CSS design templates. CSS-grid comes in handy to avoid unnecessarily nesting CSS elements thus cleaner code. CSS-grid allows you to create complex web layouts with very little effort.

Who is this tutorial for.

This tutorial is for you who wants to start on CSS-grid in web development. An advanced developer looking to refresh their knowledge on CSS-grid and flex-box should also hop in.

What you will learn.

  1. Terms used in grid with image examples.
  2. Each term in CSS grid with a corresponding example.
  3. Creating an image gallery.
  4. Bonus: Getting started with  stackblitz to code online

Prerequisites

Before beginning, you should have some HTML and CSS knowledge with the understanding of git and Git hub. Check out my article on git and Git hub for the same https://developers.decoded.africa/using-git-and-github/

To check for CSS-grid browser support in different browsers head over to https://caniuse.com/#feat=css-grid

What we will make.

Image gallery

Terms in CSS-grid

grid – generates a block-level grid

inline-grid – generates an inline-level grid

grid-template-columns - this CSS property defines the line names and sizes of the columns in the grid.

grid-template-rows - this CSS property defines the names and sizes of the rows in the grid.

column-gap -This CSS property defines the space between one grid column item and the next.

row-gap -This CSS property defines the space between one grid row item and the next.

gap - A shorthand property for row-gap and column-gap e.g gap: 20px 10px;

Neat right? Let us now get our hands dirty by putting the terms in action.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      main {
        display: grid;
        grid-template-columns: 1fr 1fr 100px;
        grid-template-rows: repeat(3, minmax(100px, auto));
        gap: 10px 10px;
      }

      main div {
        border: 2px dashed #7e7e7e;
      }

    </style>
</head>
<body>
  <main>
    <div>box-1</div>
    <div>box-2</div>
    <div>box-3</div>
    <div>box-4</div>
    <div>box-5</div>
    <div>box-6</div>
  </main>
</body>
</html>

The result
FireShot-Capture-045---Examples---127.0.0.1-1

justify-items & align-items

This property defines the default positioning for all items of the box, giving them a default way of placing each item along the appropriate axis.

  • start – aligns items to be level with the start edge of their cell
  • end – aligns items to be level with the end edge of their grid cell
  • center – aligns items in the center of their grid cell
  • stretch – fills the whole width of the grid cell (this is the default property)

The HTML

<main>
    <div>box-1</div>
    <div>box-2</div>
    <div>box-3</div>
    <div>box-4</div>
    <div>box-5</div>
    <div>box-6</div>
</main>

The General CSS

main {
    display: grid;
    grid-template-columns: 1fr 1fr 100px;
    grid-template-rows: repeat(2, minmax(100px, auto));
    gap: 10px;
}

main div {
    border-radius: 15px;
    background: rgba(155, 0, 155, 0.24);
    padding: 10px;
    font-weight: bolder;
}

The CSS justify-items: end;

main {
    justify-items: end;
}

Result

The CSS justify-items: start;

main {
    justify-items: start;
}

Result
FireShot-Capture-039---Examples---127.0.0.1

The CSS justify-items: center;

main {
    justify-items: center;
}

Result
FireShot-Capture-042---Examples---127.0.0.1

The CSS justify-items: stretch;

main {
    justify-items: stretch;
}

Result
FireShot-Capture-045---Examples---127.0.0.1

The CSS align-items: start;

main {
    align-items: start;
}

Result
FireShot-Capture-048---Examples---127.0.0.1

The CSS align-items: center;

main {
    align-items: center;
}

Result
FireShot-Capture-051---Examples---127.0.0.1

The CSS align-items: end;

main {
    align-items: end;
}

Result
FireShot-Capture-054---Examples---127.0.0.1

The CSS align-items: stretch;

main {
    align-items: stretch;
}

Result
FireShot-Capture-057---Examples---127.0.0.1

justify-content & align-content

justify content is used to justify the grid items along the row axis.
They both take the following values.

  • start – aligns the grid to be level with the start edge of the grid container
  • end – aligns the grid to be level with the end edge of the grid container
  • center – aligns the grid in the center of the grid container
  • stretch – resizes the grid items to allow the grid to fill the full width of the grid container
  • space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
  • space-between – places an even amount of space between each grid item, with no space at the far ends
  • space-evenly – places an even amount of space between each grid item, including the far ends

place-content - a shorthand property for align-content and justify-content

General CSS

main {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, auto));
    grid-template-rows: auto ;
    background: #00800034;
    gap: 10px;
}

main div {
    border-radius: 15px;
    background: #9b009b3d;
    padding: 30px 10px;
    font-weight: bolder;
}

The CSS justify-content: start;

main {
    justify-content: start;
}

Result
FireShot-Capture-063---Examples---127.0.0.1

The CSS justify-content: center;

main {
    justify-content: center;
}

Result
FireShot-Capture-069---Examples---127.0.0.1

The CSS justify-content: end;

main {
    justify-content: end;
}

Result
FireShot-Capture-066---Examples---127.0.0.1

The CSS justify-content: space-between;

main {
    justify-content: space-between;
}

Result
FireShot-Capture-074---Examples---127.0.0.1

The CSS justify-content: space-evenly;

main {
    justify-content: space-evenly;
}

Result
FireShot-Capture-069---Examples---127.0.0.1-1

The CSS justify-content: space-around;

main {
    justify-content: space-around;
}

Result
FireShot-Capture-078---Examples---127.0.0.1

You are almost there. You deserve a medal by now.


Properties for grid children.

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Values:

  • <line> – can be a number referring to the grid line number or a name to refer to the named grid line.
  • span <number> – the grid item will span across the provided number of grid tracks.
  • span <name> – the item will span across until it hits the line with the provided name
  • auto – the items will be automatically placed with an automatic span or a default span of one.

grid-column
grid-row

These are the short-hand version of grid-column-start, grid-column-end, grid-row-start and finally grid-row-end.

Values:

  • <start-line> / <end-line> – They each accept values same as their longhand version including span.

The General HTML

<main>
    <div class="box-1">box-1</div>
    <div class="box-2">box-2</div>
    <div class="box-3">box-3</div>
    <div class="box-4">box-4</div>
    <div class="box-5">box-5</div>
    <div class="box-6">box-6</div>
</main>

The General CSS

main {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, auto));
    grid-template-rows: auto;
}
main div {
    border-radius: 15px;
    background: #9b009b3d;
    padding: 10px;
    font-weight: bolder;
    height: 100px;
}

The CSS grid-column

.box-1 {
    grid-column: 2/4;
}

Result
FireShot-Capture-084--grid-column-1

The CSS grid-row

 .box-2 {
    grid-row: 1/3;
}

Result
FireShot-Capture-087---grid-row

grid-area - gives a name to the grid to be referenced in the grid-template-areas

The General CSS

main {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, auto));
    grid-template-rows: repeat(3, minmax(100px, auto));
    grid-template-areas:
      "box-1 box-3 box-2"
      "box-1 box-3 ."
      "box-4 box-5 box-6"
    ;
}
main div {
    border-radius: 15px;
    background: #9b009b3d;
    padding: 10px;
    font-weight: bolder;
}
.box-1 {
    grid-area: box-1;
}
.box-2 {
    grid-area: box-2;
}
.box-3 {
    grid-area: box-3;
}
.box-4 {
    grid-area: box-4;
}
.box-5 {
    grid-area: box-5;
}
.box-6 {
    grid-area: box-6;
}

Result
FireShot-Capture-090---grid-template-areas

If you need to leave an empty grid box you just input . in place of the grid area as shown below.

main {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, auto));
    grid-template-rows: repeat(3, minmax(100px, auto));
    grid-template-areas:
      "box-1 box-3 box-2"
      ". . box-2"
      "box-4 box-5 box-6"
    ;
}

Result
FireShot-Capture-090---grid-template-areas-empty

Now two more concepts and we are done learning.

justify-self & align-self

Values:

  • start – aligns the grid item to be level with the start edge of the cell
  • end – aligns the grid item to be level with the end edge of the cell
  • center – aligns the grid item in the center of the cell
  • stretch – fills the whole width of the cell (this is the default)

General CSS

Remember to comment out the grid area of individual divs if you are using the css grid-area.

main {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, auto));
    grid-template-rows:auto;
}
main div {
    border-radius: 15px;
    background: #9b009b3d;
    padding: 10px;
    font-weight: bolder;
}

The CSS justify-self: start;

main div {
    justify-self: start;
}

Resut
FireShot-Capture-096--justify-self-start

The CSS justify-self: center;

main div {
    justify-self: center;
}

Result
FireShot-Capture-096--justify-self-center

The CSS justify-self: end;

main div {
    justify-self: end;
}

Result
FireShot-Capture-098--justify-self-end

The CSS justify-self: stretch;

main div {
    justify-self: stretch;
}

Result
FireShot-Capture-106---justify-self-stretch

General CSS

main {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, auto));
    grid-template-rows:auto;
}
main div {
    border-radius: 15px;
    background: #9b009b3d;
    padding: 10px;
    font-weight: bolder;
}

The CSS align-self: start;

main div {
    align-self: start;
}

Result
FireShot-Capture-109---Examples---127.0.0.1

The CSS align-self: center;

main div {
    align-self: center;
}

Result
FireShot-Capture-112---Examples---127.0.0.1

The CSS align-self: end;

main div {
    align-self: end;
}

Result
FireShot-Capture-115---Examples---127.0.0.1

The CSS align-self: stretch;

main div {
    align-self: stretch;
}

Result
FireShot-Capture-118---Examples---127.0.0.1

place-self - Takes the property of the align-self and justify-self

Values:

  • auto – The “default” alignment for the layout mode.
  • <align-self> / <justify-self> – The first value sets align-self, the second value justify-self. If either of the value is omitted, the first value is assigned to both properties.
main div {
     place-self: center stretch;
}

Result
FireShot-Capture-121---Examples---127.0.0.1

main div {
     place-self: center;
}

Result
FireShot-Capture-124---Examples---127.0.0.1

As promised here is our image gallery.

Use the code below.

The file structure should be as follows:

gallery
     |-- images - (your image files here)
     |-- index.html
     |-- style.css

Go to https://pixabay.com/ to get free images to download and use.

The HTML

index.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>CSS Grid</title>
  </head>

  <body>
    <header class="header">
      <img src="./images/child-2299483_1280.jpg" alt="child">
      <h1>Big Shoot <br> <span>Photography</span></h1>
    </header>
    <main>
      <h3>Gallery</h3>
      <a><img src="./images/butterfly-1127666_1280.jpg" alt="butterflies" srcset=""> <span>Butterflies</span> </a>
      <a><img src="./images/iceland-1979445_1280.jpg" alt="iceland" srcset=""> <span>Iceland</span> </a>
      <a><img src="./images/landscape-615429_1280.jpg" alt="landscape"> <span>Landscape</span></a>
      <a><img src="./images/freerider-498473_1280.jpg" alt=""> <span>Freerider</span></a>
      <a><img src="./images/sunset-1373171_1280.jpg" alt="sunseet"> <span>Sunset</span> </a>
      <a><img src="./images/mountain-landscape-2031539_1280.jpg" alt="mountains"> <span>Mountains</span> </a>
      <a><img src="./images/woman-1807533_1280.jpg" alt="woman"> <span>Woman</span> </a>
    </main>

  </body>

</html>

The CSS

style.css
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Roboto+Slab:wght@700&display=swap');

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease-in-out;
  font-family: 'Roboto Slab', serif;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header {
  width: 100%;
  height: 70vh;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.header h1 {
  position: absolute;
  justify-self: center;
  font-size: 70px;
  line-height: 50px;
  text-align: center;
  padding: 20vh 5% 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.507);
}

.header span {
  font-family: 'Permanent Marker', cursive;
  font-size: 40px;
}

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

main h3 {
  text-align: center;
  padding: 30px 10px;
  grid-column: 1/4;
}

main a {
  height: 20em;
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  cursor: pointer;
  color: white;
}

main a:nth-child(2) {
  grid-column: 1/3;
}

main a:last-child {
  grid-column: 2/4;
}

main a span {
  position: absolute;
  z-index: 10O;
  top: 20px;
  left: 0;
  background: #00000083;
  width: 0px;
}

main a:hover img {
  filter: grayscale(1);
}

main a:hover span {
  width: auto;
  padding: 10px;
}

.gallery {
  display: grid;
  gap: 10px 10px;
  grid-template-columns: repeat(3);
  grid-template-rows: auto;
  padding: 20px 10%;
}

.gallery a {
  height: 10em;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.452);
  border: 1px solid #000;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(1);
  cursor: pointer;
}

.gallery a:nth-child(1) {
  grid-column: 1/3;
}

.gallery a:nth-child(2) {
  grid-row: 2/5;
}

.gallery img:hover {
  filter: none;
}

/* Making the grid responsive */
@media only screen and (max-width: 600px) {

  main a,
  main a:nth-child(2),
  main a:last-child {
    /* grid-column: ; */
    grid-column: 1/4;
  }
}

See the full interactive example here

To get started with stackblitz had over to https://stackblitz.com/

via GIPHY

Hurray :)

We are done !!!

Take a deep breath and thank your body for sustaining you throughout this tutorial.

Additional resources

For more in-depth information visit Mozilla developers network on the link below https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

You've successfully subscribed to Decoded For Devs
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Your link has expired
Success! Your account is fully activated, you now have access to all content.