Essential Things You Need to Know About CSS-Grid

Last updated on February 28, 2020

When starting to layout with CSS, the first thing comes to our mind is Responsive. Yes Obviously, a few years back which was so difficult to implement that in plain CSS then it completely changed the way we write plain CSS for responsive.

Bored of reading tutorials? Then Want to build your next favorite app layout with CSS-Grid then check out this post.

Introduction

To design the web application, responsive is the minimal criteria that we should meet. We mostly stick two layouts such as CSS Grid and Flex box out of multiple layout options.

But, both we can use by either combining or separately. As far as my opinion is to always use those two together. CSS Grid differs from Flexbox is in dimensional way which is 2 dimensional and 1 dimensional respectively.

Enough of the introduction, let’s jump into the detail of this blog post.

There are certain css properties that we need to memorize in terms of effective use of CSS Grid in quick span of time.

Essential Things about CSS-Grid

As said previously, I list out the required css properties that we need to assign for the container HTML element.

display: ‘grid’

The above setting will enable the container html element as CSS Grid.

• display
• grid-gap
• grid-template-rows
• grid-template-columns
• grid-auto-rows
• grid-auto-columns

The above said things are enough for the most of the practical situation while designing UI but there might be situation where we need to do specific styling for child level items within the container. Those are,

• grid-column – Used for spreading the grid cell horizontally
• grid-row – Used for spreading the grid cell vertically
• justify-self – Used for aligning the child item within the grid cell for horizontally
• align-self – Used for aligning the child item within the grid cell for vertically

// index.html

<div class="container">
  <ul class="scheduler-options">
    <li><a href="javascript:void(0)" class="optn">daily</a></li>
    <li><a href="javascript:void(0)" class="optn">weekly</a></li>
    <li><a href="javascript:void(0)" class="optn">monthly</a></li>
  </ul>
  <section class="slots">
    <div class="scheduler-grid daily"></div>
    <div class="scheduler-grid weekly"></div>
    <div class="scheduler-grid monthly"></div>
  </section>
</div>

Here I give you the minimal version of CSS set up that help to understand CSS Grid. First things first, setting up container element.

// styles.css

.container {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.scheduler-grid {
  height: 100%;
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Generate Dynamic Columns & Rows

Definitely we would face one situation that we should create columns and rows dynamically and that’s also be responsive. In order to achieve this, we should know repeat minmax auto-fill and grid-auto-rows.

repeat is the css utility function helps to minimize the generation of rows/columns along with size parameter.

minmax helps to adjust the width or height of the rows/columns but works together with repeat function.

auto-fillcreates and adjusts the columns based on the available space based on the container height.

grid-auto-rows While generating rows or columns dynamically the implicit rows/columns height/width we need to set.

One caveat is, when dynamic creation of rows/columns the grid-template-columns & grid-template-rows are not working together since implicit rows doesn’t set enough height/width. To know more about there is github issue

To overcome this behavior, I combined these grid-auto-rows & grid-template-columnscss grid properties together. We can interchange also grid-auto-columns & grid-template-rows.

References

• MDN CSS-Grid