CSS Grid Item Expanding Despite Constraints

user_8835439 0
Viewed 621

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?

css-grid css html
1 Answers

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>

user_86203330
Related