CODEWITHSUNDEEP
htmlcssflexboxgrid
jonno182
jonno182

Reputation: 13

Cant get my grid to display in the correct way?

I have been trying to learn CSS grid and I came across a problem where my grid is staggering. I know there is not a lot of content but I have removed the .item classes as I was trying to debug. Any help is really appreciated!

css * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-container {
  height: 100vh;
  border: 10px solid #ccc
}
<div class="grid-container">
  <div class="grid-item item-1">
    item 1
  </div>
  <div class="grid-container">
    <div class="grid-item item-2">
      item 2
    </div>
    <div class="grid-container">
      <div class="grid-item item-3">
        item 3
      </div>
      <div class="grid-container">
        <div class="grid-item item-4">
          item 4
        </div>
        <div class="grid-container">
          <div class="grid-item item-5">
            item 5
          </div>
        </div>

Website : Picture of the problem

Upvotes: 0

Views: 66

Answers (2)

Armedin Kuka
Armedin Kuka

Reputation: 675

It looks like you haven't properly closed the tags. The div tags that contain the grid-container class aren't closed. Inside your body, you should ideally have something like this :

<div class="grid-container">
  <div class="grid-item item-1">
    item 1
  </div>
</div>
<div class="grid-container">
  <div class="grid-item item-2">
    item 2
  </div>
</div>
<div class="grid-container">
  <div class="grid-item item-3">
    item 3
  </div>
</div>
<div class="grid-container">
  <div class="grid-item item-4">
    item 4
  </div>
</div>
<div class="grid-container">
  <div class="grid-item item-5">
    item 5
  </div>
</div>

Upvotes: 1

user7974621
user7974621

Reputation:

If I understand correctly, your issue is that divs appear to move further to the right each time you declare a new one, right?

By declaring all your divs with the .grid-container class you're stacking up the border property, making each consecutive div's border 10px wider than the last.

Try using the class just for the first div, like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item-1">
            item 1
        </div>
        <div class="grid-content">
            <div class="grid-item item-2">
                item 2
            </div>
        </div>
        <div class="grid-content">
            <div class="grid-item item-3">
                item 3
            </div>
        </div>
        <div class="grid-content">
            <div class="grid-item item-4">
                item 4
            </div>
        </div>
        <div class="grid-content">
            <div class="grid-item item-5">
                item 5
            </div>
        </div>
    </div>
</body>

</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.grid-container {
    height: 100vh;
    border: 10px solid #ccc
}

.grid-content {
    border-top: 10px solid #ccc
}

Working example: https://codepen.io/04kurisu/pen/WNNBmpE

If I'm mistaken, please let me know and I'll update the answer.

Upvotes: 0

Related Questions