How is it possible that changing my grid-template-row settings is causing an impact on the

Question

How is it possible that changing my grid-template-row settings is causing an impact on the

I'm currently working on configuring the rows to have a grid-template-rows: 30px 1fr; setup, where the first row is set to 30px and all subsequent rows adjust their height accordingly. However, I've noticed that this styling seems to be impacting the third item in the column.

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.cont {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 30px 1fr;
  grid-gap: 2px;
}
.cont div {
  background: red;
  height: 90px;
}

<div class="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

css css-grid

Answer 1

Answer №1

There are 3 columns defined, but 5 divs do not fill these columns "correctly". Adding a 6th div will show the desired result.

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.cont {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 30px 1fr;
  grid-gap: 2px;
}
.cont div {
  background: red;
  /*height: 90px;*/
  margin-bottom: 5px;
}

<div class="cont">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 2

There are 3 columns defined, but 5 divs do not fill these columns "correctly". Adding a 6th div will show the desired result.

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.cont {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 30px 1fr;
  grid-gap: 2px;
}
.cont div {
  background: red;
  /*height: 90px;*/
  margin-bottom: 5px;
}

<div class="cont">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 3

Answer №2

Your design is experiencing overflow issues due to placing an element with a height of 90px inside a row that is only 30px tall.

To better visualize the problem, consider adding some opacity:

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.cont {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 30px 1fr;
  grid-gap: 2px;
}

.cont div {
  background: red;
  border:5px solid ;
  height: 90px;
  opacity: 0.5;
}

<div class="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

The issue becomes apparent when you observe how the elements in the first row overlap those in the second row.

Answer 4

Your design is experiencing overflow issues due to placing an element with a height of 90px inside a row that is only 30px tall.

To better visualize the problem, consider adding some opacity:

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.cont {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 30px 1fr;
  grid-gap: 2px;
}

.cont div {
  background: red;
  border:5px solid ;
  height: 90px;
  opacity: 0.5;
}

<div class="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

The issue becomes apparent when you observe how the elements in the first row overlap those in the second row.

How is it possible that changing my grid-template-row settings is causing an impact on the

Answer №1

Answer №2

Similar questions

What is the way to change the background color using HTML5 getItem?

Update Calendar Information Without Reloading the Entire Page

Is it possible to consolidate all CSS and JS links into a single PHP file for easier management?

Unique design and elements featuring the `width: auto` property for custom fonts

Creating nested columns in a bootstrap grid system can enhance the structure and organization of your

Enhance the appearance of Google Maps by incorporating gradient effects, box shadows, or other similar visual

Horizontally align the label with the Checkbox

Switching Text in ReactJS from V to X: A Tutorial

The input focus placeholder at the top is not functioning properly when applied to an input field that

Adjusting font size in dynamic containers relatively

Display overlay objects specifically focused around the mouse cursor, regardless of its position on the screen

Tips for adjusting image hues in Internet Explorer?

What are the steps to create a dynamic Ajax Loading view?

VueJS3 and Vuetify are in need of some additional CSS classes

What could be causing my navigation bar to malfunction?

Issue with bootstrap: When multiple svg tags are added to my navbar, it causes the container content to be deleted

Modify the buttons in the Angular Material Nav-bar according to the current page

Creating a table in HTML code

The CSS code is functioning properly when implemented in a browser, but is not displaying correctly when added to the

Steps to customize the appearance of a button within a file input field