How to adjust row height for layout grid in react?


I’m trying to build a react application which has 3 main elements. The first element should take up 2/12 of the space vertically, the second element should take up 8/12 of the space vertically and the last element 2/12.

In CSS grid, we could indicate the row height for the div. I’ve seen the layout grid in material UI but it seems to be only column-based but I need a grid that allows me to adjust the number of rows for each element instead.

Is there a solution for this in react?

Picture of layout needed (rough)


You could do this pretty easily with CSS grid with the grid-template-areas prop

I set the rows for the sidebar as 2/12, main as 8/12, and the last element 2/12.


.container {
  display: grid;
  height: 100vh;
  width: 100%;

  grid-template-columns: 1fr;
  grid-template-rows: 2fr 8fr 2fr;
  grid-gap: 3px;

.sidebar {
  background-color: blue;
  grid-area: sidebar;

.main {
  background-color: lightblue;
  grid-area: main;

.content {
  background-color: green;
  grid-area: contents;


import React from "react";
import "./styles.css";

const App = () => {
  return (
    <div className="container">
      <div className="sidebar" />
      <div className="main" />
      <div className="content" />

export default App;

Answered By – Bas bas

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.