In this blog post, I would like to share on how to create dynamic rows and columns with CSS-Grid.

I have created the Scheduler UI template markup to demonstrate further.

IDEA

Only learning doesn’t serve any purpose instead building an application will.

This app comprises Scheduler option input and based on the input will create a container with grid-cell for showing the day but dynamically.

Dynamic CSS-Grid Columns & Rows

I cover the bare essential piece from the below code.

<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>

javascript:void(0) will restrict redirecting URL.

.scheduler-grid element acts as a CSS-Grid container and based on the scheduler-options input each grid container will be filled with grid cells.

.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));
}

grid-auto-rows grid-template-columns repeat minmax and auto-fill are the CSS-Grid configuration for dynamic creation of grid-cells.

The CSS repeat function will create the grid-cells based on the given min and max width of each cell using minmax function.

The important point we should get it here is that, if we use both grid-template-rows and grid-template-columns for dynamic creation then rows will get cut at the end of the viewport.

Hence, to avoid this we should set the row height for the dynamically creating rows with the help of grid-auto-rows property.

After all this, we would end up with the below expected result.