How to adjust row height for layout grid in react?-CodePudding

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?

CodePudding user response：

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.

styles.css

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

  grid-template-columns: 1fr;
  grid-template-rows: 2fr 8fr 2fr;
  grid-template-areas:
    "sidebar"
    "main"
    "contents";
  grid-gap: 3px;
}

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

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

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

App.js

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

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

export default App;

https://codesandbox.io/s/silly-hertz-pppbf2?file=/src/styles.css