MAKING LAYOUTS WITH CSS (Pt c) - Part 5 of Frontend Development Series
Tags: css, grid, layout, webdev
Published: 2019-09-19 16:48:32

This article is a continuation of my previous article - [MAKING LAYOUTS WITH CSS (Pt b) - Part 5 of Frontend Development Series](https://dev.to/dillionmegida/making-layouts-with-css-pt-b-part-5-of-frontend-development-series-1icl) - 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.

```html
<!-- 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>
```
```css
/* 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:
![Grid example](https://res.cloudinary.com/dillionmegida/image/upload/v1568902616/images/code_samples/grid1_av5z7w.jpg)
 Also, this diagram above would become clearer as we continue

---
![Grid container illustration](https://codingthesmartway.com/wp-content/uploads/2017/12/01_CSS_Grid_Overview.png)
<figcaption>Image from <a href='https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwimxs-jhd3kAhVS6uAKHY5gBcwQjRx6BAgBEAQ&url=https%3A%2F%2Fcodingthesmartway.com%2Fgetting-started-with-css-grid%2F&psig=AOvVaw1mV5A918xg4GlBq0k_hPun&ust=1568987821603427'>codingthesmartway.com</a></figcaption>

* 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;
![Grid example](https://res.cloudinary.com/dillionmegida/image/upload/v1568902616/images/code_samples/grid1_av5z7w.jpg)

This diagram should be clearer now right? ðŸ˜Š

Let's talk about more properties...

![justify-content and align content in grid](http://grid-layout.com/images/align-combine2.png)
<figcaption>Image gotten from grid-layout.com</figcaption>

- 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](https://dev.to/dillionmegida/making-layouts-with-css-pt-b-part-5-of-frontend-development-series-1icl) 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](https://css-tricks.com/snippets/css/complete-guide-grid/)

You could ask questions or make contributions in the comment section or reach out to me on [twitter](https://twitter.com/iamdillion).

I also write articles on frontend web development on my personal website - [dillionmegida.com](https://dillionmegida.com)