Search code examples
htmlcssresponsive-designcss-grid

CSS how to make childeren of a parent take up equal amounts of space?

I'm currently using a grid to display a predefined amount of childeren elements. The problem is that I don't know how many boxes I will need. Is there a way to make this more dynamic? For example when there are only 4 childeren elements it becomes a 2x2 that takes up all the space that is available? If there are 9 childeren elements it becomes a 3x3 that is equal in size?

My current grid:

4x4 Grid

My code to achieve the image above:

import React from 'react';
import Container from "./Container";

export default function AsanaIssues() {
    return(
        <div className="asana-issues--parent">
            <Container className="asana-issues--div1" title="Online" value={25}/>
            <Container className="asana-issues--div2" title="Online" value={54}/>
            <Container className="asana-issues--div3" title="Online" value={97}/>
            <Container className="asana-issues--div4" title="Online" value={31}/>
            <Container className="asana-issues--div5" title="Online" value={55}/>
            <Container className="asana-issues--div6" title="Online" value={35}/>
            <Container className="asana-issues--div7" title="Online" value={78}/>
            <Container className="asana-issues--div8" title="Online" value={45}/>
            <Container className="asana-issues--div9" title="Online" value={35}/>
            <Container className="asana-issues--div10" title="Online" value={35}/>
            <Container className="asana-issues--div11" title="Online" value={99}/>
            <Container className="asana-issues--div12" title="Online" value={21}/>
            <Container className="asana-issues--div13" title="Online" value={3}/>
            <Container className="asana-issues--div14" title="Online" value={21}/>
            <Container className="asana-issues--div15" title="Online" value={88}/>
            <Container className="asana-issues--div16" title="Online" value={46}/>
        </div>
    )
}

My current css:

.asana-issues--parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    border-radius: 10px;
    margin: 10px;
}

.asana-issues--div1 { grid-area: 1 / 1 / 2 / 2; }
.asana-issues--div2 { grid-area: 1 / 2 / 2 / 3; }
.asana-issues--div3 { grid-area: 1 / 3 / 2 / 4; }
.asana-issues--div4 { grid-area: 1 / 4 / 2 / 5; }
.asana-issues--div5 { grid-area: 2 / 1 / 3 / 2; }
.asana-issues--div6 { grid-area: 2 / 2 / 3 / 3; }
.asana-issues--div7 { grid-area: 2 / 3 / 3 / 4; }
.asana-issues--div8 { grid-area: 2 / 4 / 3 / 5; }
.asana-issues--div9 { grid-area: 3 / 1 / 4 / 2; }
.asana-issues--div10 { grid-area: 3 / 2 / 4 / 3;}
.asana-issues--div11 { grid-area: 3 / 3 / 4 / 4; }
.asana-issues--div12 { grid-area: 3 / 4 / 4 / 5; }
.asana-issues--div13 { grid-area: 4 / 1 / 5 / 2; }
.asana-issues--div14 { grid-area: 4 / 2 / 5 / 3; }
.asana-issues--div15 { grid-area: 4 / 3 / 5 / 4; }
.asana-issues--div16 { grid-area: 4 / 4 / 5 / 5; }
Solution

  • The way to solve my problem is to auto-fill the repeat of the grid-template-rows property.

    .asana-issues--parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(auto-fill, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    border-radius: 10px;
    margin: 10px;
}