CSS Grid generates a unique container for every HTML element

Question

CSS Grid generates a unique container for every HTML element

My website's CSS code includes the following:

*{
    height: 100%;
    width: 100%;
    margin: 0;

}
.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid div:nth-child(odd){
    border: black 2px solid;
}

.grid div:nth-child(even){
    border: black 2px solid;
}

I am trying to have four boxes arranged, but currently it is creating a new box for each HTML tag instead of placing it correctly, as shown in this screenshot.

The visible low poly section is not displaying the content correctly in the four boxes.

You can view the template here.

html css vue.js css-grid

Answer 1

Answer №1

To achieve the desired outcome, add height and width specifications directly to the grid itself.

* {
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 90vh;
  width: 95vw;
}

.grid div:nth-child(odd) {
  border: black 2px solid;
}

.grid div:nth-child(even) {
  border: black 2px solid;
}

Answer 2

To achieve the desired outcome, add height and width specifications directly to the grid itself.

* {
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 90vh;
  width: 95vw;
}

.grid div:nth-child(odd) {
  border: black 2px solid;
}

.grid div:nth-child(even) {
  border: black 2px solid;
}

Answer 3

Answer №2

The issue arises when you set height: 100% for every element in your CSS.

* {
   height: 100%;
   width: 100%;
   margin: 0;
}

This causes all elements to stretch to 100% of their parent container, leading block elements to stack vertically.

You can simplify this by removing the above code and using the following instead:

body {
  margin: 0;
}

.grid {
  height: 100vh;
}

Answer 4

The issue arises when you set height: 100% for every element in your CSS.

* {
   height: 100%;
   width: 100%;
   margin: 0;
}

This causes all elements to stretch to 100% of their parent container, leading block elements to stack vertically.

You can simplify this by removing the above code and using the following instead:

body {
  margin: 0;
}

.grid {
  height: 100vh;
}

CSS Grid generates a unique container for every HTML element

Answer №1

Answer №2

Similar questions

Is it possible to modify the color of a span element within a select dropdown?

show certain DIVs based on the URL

Setting a uniform width for all columns in a table using ReactJS

How can you display '<>' characters in a QLabel and set text accordingly?

What is the best way to modify a constant array in Angular?

deactivate a vessel, causing all of its contents to be rendered inactive

Tips for adjusting the color of the sidebar in an HTML email template

A step-by-step guide on creating a route in vue.js

Troubleshooting webpack encore issues with importing enums from node_modules

Should padding be added to container-fluid in order to ensure consistent spacing on all devices from left to right?

Angular 6 provides a regular expression that specifically targets the removal of any characters that are not numbers and enforces the allowance of

`Issue with Firefox's rendering of HTML tables`

Is there a way to automatically click the 'next' arrow on my image slider?

Set a maximum character limit for HTML input forms

Left align the CSS menu text next to the menu image

How can I display an image from PHP on another page?

Adjust text size based on device orientation changes

After changing the form action using jQuery, the GET variables mysteriously vanish

Using Angular/Typescript to interact with HTML5 Input type Date on Firefox (FF)

Creating a CSS triangle that smoothly transitions between two different colors