DEV Community

Srinivasan K K
Srinivasan K K

Posted on • Originally published at srinivasankk.com

7 1

Creating Dynamic Rows & Columns with CSS-Grid

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>


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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.

BrokeRow

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.

Scheduler_UI

Image of PulumiUP 2025

Transform Your Cloud Infrastructure

Join PulumiUP 2025 on May 6 for Expert Insights & Demos.

Register Now

Top comments (0)

👋 Kindness is contagious

Dive into this informative piece, backed by our vibrant DEV Community

Whether you’re a novice or a pro, your perspective enriches our collective insight.

A simple “thank you” can lift someone’s spirits—share your gratitude in the comments!

On DEV, the power of shared knowledge paves a smoother path and tightens our community ties. Found value here? A quick thanks to the author makes a big impact.

Okay