CODEWITHSUNDEEP
htmlcssvue.jscss-grid
radmacher
radmacher

Reputation: 165

CSS grid creates a new box for each html tag

I have this CSS part for my site:

*{
    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;
}

And I want to have four boxes, but it just creates a new box for each HTML tag, instead of placing it in the corresponding box, as you can see here.

The low poly part of the screenshot is the visible part and the four boxes are the boxes which should contain the content

Here is the template: Click

Upvotes: 2

Views: 40

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371251

The problem is you're applying height: 100% to every single element in your code.

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

This forces all elements to take 100% of the parent, and block elements stack vertically.

You don't need to do this. It's overkill.

Remove the code above and just add this:

body {
  margin: 0;
}

.grid {
  height: 100vh;
}

Upvotes: 1

jensmtg
jensmtg

Reputation: 506

Put the height and width specifications on the grid itself, and it should behave more as expected.

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

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

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

Upvotes: 2

Related Questions