MAKING LAYOUTS WITH CSS (Pt c) - Part 5 of Frontend Development Series

This article is a continuation of my previous article - MAKING LAYOUTS WITH CSS (Pt b) - Part 5 of Frontend Development Series - on the frontend development series.

Table of Contents

• CSS Grid
• Conclusion

CSS Grid

From the previous article, I want to believe that you are now conversant with flex.

A display property of grid, when set in any element, makes that element a grid container. Unlike the flex-container which offers a 'one-direction' flow of adjusting elements, this container offers both directions.

<!-- index.html -->
<div class='grid-container'>
  <div class='grid-item'></div>
  <div class='grid-item'></div>
  <div class='grid-item'></div>
  <div class='grid-item'></div>
</div>

/* style.css */
.grid-container {
  display: grid;
  background-color: pink;
  grid-template-columns: auto 450px;
  grid-template-rows: 100px 100px;
  width: 600px;
  padding: 20px;
  grid-gap: 30px;
}
.grid-item {
  background-color: white;
  border: 5px solid purple;
}

This code would be referenced as you go through this article.

Result:

Also, this diagram above would become clearer as we continue

---

Image from codingthesmartway.com

• The vertical lines of grid items are called (as you may have guessed) columns. They are termed grid columns.
• While the horizontal lines are called rows which are termed grid rows.
• The gap between grid columns are termed column gap. The gap between columns can be set with the property grid-column-gap.
• The gap between row columns are termed row gap. The gap between rows can be set with the property grid-row-gap.
• The gap between rows and columns can be simultaneously set with grid-gap.

grid-gap: 30px; - this line in our code above should be understood by now with the effect on the diagram.

• The lines between columns are called column lines.
• The lines between rows are called row lines.

Properties associated with CSS grid

These properties are only effective when the display of the container is set to grid.

• grid-template-columns: With this property, you can specify the number of columns that would be given in your container. In our code above,
  grid-template-columns: auto 450px;
  This line makes the grid container to contain two columns - with widths of auto and 450px.
  What this means is that the second column will have a width of 450px while the first column would fill the remaining spaces available.

  You can specify exact sizes such as grid-template-columns: 10px 450px 40px 100px;. This means the column would accommodate four columns with the specified widths.

• grid-template-rows: With this property, you can specify the number of rows that your grid container would have. In our code above;
  grid-template-rows: 100px 100px; specifies two rows with their respective heights for the grid container.

Note: If grid-template-rows is not specified, the grid container would use the maximum number of rows determined from grid-template-columns and number of children.

Also note: If the number of children exceeds the number of grid cells our container provides, our grid may look disordered. This shouldn't surprise you 😕

Back to our diagram above;

This diagram should be clearer now right? 😊

Let's talk about more properties...

Image gotten from grid-layout.com

• justify-content
  The values for this property include:
  space-evenly | space-between | space-around | center | stretch | start | end
  These values are similar to the justify-content property of flex containers. The only difference is that flex-start is used as start and same thing for end.

• align-content
The values for this property also include:
space-evenly | space-between | space-around | center | stretch | start | end.

This is also similar to align-content in flex containers. It is also described in the diagram above.

Kindly checkout this article on flex if the terms mentioned above does not sound familiar.

Conclusion

You've observed how unlike CSS flex which only focuses on one direction at a time, CSS grid focuses on both directions at the same time.
But, they have their use cases.

Want to get a deeper understanding and methods of using grids? I couldn't suggest any better article (in my opinion) - Complete CSS Grid - css-tricks.com

You could ask questions or make contributions in the comment section or reach out to me on twitter.

I also write articles on frontend web development on my personal website - dillionmegida.com