2

I have a CSS Grid layout in which I specified the starting/ending rows and columns for each div as you can see below with the CSS

.grid-container {
width: 100%;
height: 100%;
display: grid;
grid-gap: 0;
}

.grid-item {
position: relative;
display: flex;
padding: 0;
border-radius: 10px;
margin: 10px;
background-color: #f6f6f6;
}

.g-1 {
margin-top: 20px;
margin-left: 20px;
background-color: white;
grid-column: 1/10;
grid-row: 1/2;
}

.g-2 {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
grid-column: 10/14;
grid-row: 1/40;
}

.g-3 {
margin-left: 20px;
background-color: #eaf0ff;
grid-column: 1/4;
grid-row: 2/12;
}

.g-4 {
background-color: #ebe3ff;
grid-column: 4/7;
grid-row: 2/12;
}

.g-5 {
background-color: #dff6db;
grid-column: 7/10;
grid-row: 2/12;
}

.g-6 {
margin-left: 20px;
margin-bottom: 20px;
grid-column: 1/5;
grid-row: 12/40;
}

.g-7 {
grid-column: 5/10;
grid-row: 12/28;
}

.g-8 {
margin-bottom: 20px;
grid-column: 5/10;
grid-row: 28/40;
}

which results in this

enter image description here

However, when I then add a simple h1 inside of the blue container .g-3 it expands both vertically and horizontally despite being told that its columns and rows are set to 1/4 and 2/12 respectively. 

<div className="view">
      <div className="grid-container">
        <div className="grid-item g-1">
          <h1 className="header">Hello, Levi</h1>
        </div>
        <div className="grid-item g-2"></div>
        <div className="grid-item g-3">
          <h2>Testing Size</h2>
        </div>
        <div className="grid-item g-4"></div>
        <div className="grid-item g-5"></div>
        <div className="grid-item g-6"></div>
        <div className="grid-item g-7"></div>
        <div className="grid-item g-8"></div>
      </div>
    </div>

enter image description here

How can I prevent the contents of the grid items from expanding them from their original layout as seen in the first screenshot, especially when considering there is still plenty of room for the text?

Levi K
  • 573
  • 1
  • 4
  • 23

1 Answers1

3

you didn't define any sizing for your columns so the content will define this and you will have a different layout each time you update the content.

You need to define an explicit size for the columns:

.grid-container {
  height: 100vh;
  min-height:600px;
  display: grid;
  grid-gap: 0;
  grid-auto-columns:1fr; /* this should do the job and force all the columns to be equal */
  /* you can also try minmax(0,1fr) (related: https://stackoverflow.com/a/52861514/8620333) */
}

.grid-item {
  position: relative;
  display: flex;
  padding: 0;
  border-radius: 10px;
  margin: 10px;
  background-color: #f6f6f6;
}

.g-1 {
  margin-top: 20px;
  margin-left: 20px;
  background-color: white;
  grid-column: 1/10;
  grid-row: 1/2;
}

.g-2 {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  grid-column: 10/14;
  grid-row: 1/40;
}

.g-3 {
  margin-left: 20px;
  background-color: #eaf0ff;
  grid-column: 1/4;
  grid-row: 2/12;
}

.g-4 {
  background-color: #ebe3ff;
  grid-column: 4/7;
  grid-row: 2/12;
}

.g-5 {
  background-color: #dff6db;
  grid-column: 7/10;
  grid-row: 2/12;
}

.g-6 {
  margin-left: 20px;
  margin-bottom: 20px;
  grid-column: 1/5;
  grid-row: 12/40;
}

.g-7 {
  grid-column: 5/10;
  grid-row: 12/28;
}

.g-8 {
  margin-bottom: 20px;
  grid-column: 5/10;
  grid-row: 28/40;
}
<div class="grid-container">
  <div class="grid-item g-1">
    <h1 class="header">Hello, Levi</h1>
  </div>
  <div class="grid-item g-2"></div>
  <div class="grid-item g-3">
    <h2>Testing Size</h2>
  </div>
  <div class="grid-item g-4"></div>
  <div class="grid-item g-5"></div>
  <div class="grid-item g-6"></div>
  <div class="grid-item g-7"></div>
  <div class="grid-item g-8"></div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • So by adding the `grid-auto-columns:1fr;` the problem is solved from what I understand. Can you explain a little more what that is doing? – Levi K Jun 14 '20 at 20:23
  • @LeviK yes, this will make all the columns take `1fr` as size which mean all the columns will be equal to 1fr thus the free space will be split equally between all of them. By default the size is `auto` so the content will define the column size – Temani Afif Jun 14 '20 at 20:25
  • Ah ok, so basically I never set an explicit size for the columns? Also, should I do this on the rows as well? – Levi K Jun 14 '20 at 20:26
  • @LeviK yes you never defined a size and you should always do especially for columns. You can also do the same for rows if this is what you want (have all the rows to be equal) but generally we keep the row based on their content since the content can be dynamic. – Temani Afif Jun 14 '20 at 20:28
  • @LeviK related question for more details: https://stackoverflow.com/a/58267170/8620333 / – Temani Afif Jun 14 '20 at 20:30