How to divide equal parts of grid using grid(fr) only using HTML and CSS-CodePudding

Hy friends, I want to divide a page into 5 equal parts using CSS grid property and it's doing better work but still, I am unable to understand the logic behind this. In a CSS grid system, a screen has 12fr units and here I used only 10fr units so that is what happens if I leave 2fr units or There is any other way to use all 12 units.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
        display: grid;
        grid-template-columns: repeat(5, 2fr);
      }
    </style>
  </head>
  <body>
    <footer class="grid">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
    </footer>
  </body>
</html>

CodePudding user response：

"In a CSS grid system, a screen has 12fr units"

No it doesn't. It has as many as you tell it to have. In your case you have told it to be 10fr wide with grid-template-columns: repeat(5, 2fr)

There is generally no need to use multiple values of fr since grid-template-columns: repeat(5, 1fr); will do the same thing.

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.grid div {
  text-align: center;
  border: 1px solid green;
}

<footer class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</footer>

If you want a 6/12 column grid just adjust to grid-template-columns: repeat(6, 1fr);

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.grid div {
  text-align: center;
  border: 1px solid green;
}

<footer class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</footer>

As you see since you only have 5 elements they take up the first 5 columns.

CodePudding user response：

I think if you want to make the div element side by side, you can just use grid-template-columns: 1fr 1fr;

take a look at this,

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.grid-child-one{
    height:300px;
    background-color: lightgreen;
}
.grid-child-two{
    height: 300px;
    background-color: skyblue;
}

<div class="grid-container">

    <div class="grid-child-one">
        Grid Column 1
    </div>

    <div class="grid-child-two">
        Grid Column 2
    </div>
  
</div>