How to dynamic rows & columns with CSS-Grid

Last updated on February 4, 2021

In one of my previous blog post, we have gone through an essential key things need to know about CSS-Grid. To continue the same learning it is better to build something funny with the learning on CSS-Grid. Yes how to dynamic rows & columns with CSS-Grid.

Introduction

As said earlier, I took an idea and built an app with minimal feature called Scheduler UI. To build it, I have used plain HTML 5, CSS 3 and JavaScript. That’s led me to write up this blog post How to build a Scheduler UI with CSS-Grid. This will help on achieving dynamic creation of css-grid columns and rows.

Idea

Only learning doesn’t serve any purpose instead building an application will. This app comprises of Scheduler option input and based on input will create a container with grid-cell for showing the day.

The HTML container element represents CSS-Grid layout and within the container each grid cell represents each day based on the date.

Typically, required an input for selecting the option (daily, weekly and monthly) from tab style UI element. But the most important thing here is that auto generate grid cell, grid row and column for showing the container and day.

Dynamic CSS-Grid Columns & Rows

Because of the below said two challenges, we’ll be covering how to dynamically create css-grid rows and columns from this application

• Tab Style UI element
• Auto Generate Grid Container and Grid Cell

To quick grasp of an application layout, I share the code snippet of the same but essential code pieces.

// 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>
  <div class="month-name"></div>
  <section class="slots">
    <div class="scheduler-grid daily"></div>
    <div class="scheduler-grid weekly"></div>
    <div class="scheduler-grid monthly"></div>
  </section>
</div>

Note: Why we have javascript:void(0) ?

// styles.css

// html container element
.scheduler-grid {
  height: 100%;
  margin: 50px 25px;
  padding: 5px 100px;
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

// Each grid cell
.block {
  border: 1px solid #333;
  background-color: var(--planner-default-bg-color);
  position: relative;
  margin: 50px;
  height: 100px;
  width: 200px;
}

.block div {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.block p {
  position: absolute;
  right: 35%;
}

Demo

Eventually, the below screenshots depict the Scheduler UI application,

You can please check out the Scheduler UI source code