CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 323

inner div spilling out of outter div

I'm trying to create a responsive 3x3 grid within a square. The grid is currently spilling out of the outer div when I resize the page. How do I make the grid fit within the square and resize within proportion to the outer div? Thank you.

Here is a jsfiddle: https://jsfiddle.net/alexb12/prs5z9cL/

My code:

.wrapper{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 27vw;
  height: 27vw;
  background-color: #d8c7ff;
  border-radius: 10px;
  border: 4px;
  border-style: solid;
  border-color: purple;
  padding:1em;
}

.box{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5%;
  column-gap: 5%;
}

.box > div{
  border: #333 1px solid;
  padding: 1em;
  background: red;
  width: 6vw;
  height: 6vw;
  max-width: 100%;
}
  <div class="wrapper">
          <div class="box">
              <div>
              hi
              </div>
              <div>
              hi
              </div>
              <div>
              hi
              </div>
              <div>
              hi
              </div>
              <div>
              hi
              </div>
              <div>
              hi
              </div>
              <div>
              hi
              </div>
              <div>
              hi
              </div>
              <div>
              hi
              </div>
          </div>
  </div>

Upvotes: 0

Views: 98

Answers (4)

Franco Fern&#225;ndez
Franco Fern&#225;ndez

Reputation: 1

Just remove width and height from selector .box > div and the issue will get resolved. Your css should be like this

.box > div{
  border: #333 1px solid;
  padding: 1em;
  background: red;
  max-width: 100%;
}

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272909

Update the code like below:

.wrapper {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50vmin;
  height: 50vmin;
  background-color: #d8c7ff;
  border-radius: 10px;
  border: 4px solid purple;
  padding: 1em;
}

.box {
  display: grid;
  height:100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5%;
}

.box>div {
  border: #333 1px solid;
  background: red;
  display:flex;
  justify-content:center;
  align-items:center
}
<div class="wrapper">
  <div class="box">
    <div>
      hi
    </div>
    <div>
      hi
    </div>
    <div>
      hi
    </div>
    <div>
      hi
    </div>
    <div>
      hi
    </div>
    <div>
      hi
    </div>
    <div>
      hi
    </div>
    <div>
      hi
    </div>
    <div>
      hi
    </div>
  </div>
</div>

Upvotes: 1

Ralph David Abernathy
Ralph David Abernathy

Reputation: 5508

Here we go: https://codepen.io/obliviga/pen/KKMoaBd?editors=1100

I altered your CSS a bit:

.wrapper {
  width: 27vw;
  height: 27vw;
  background: tomato;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 5%;
  row-gap: 5%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
}

.box {
  background-color: gray;
}

Let me know if you have any questions on the implementation.

Upvotes: 0

user14466490
user14466490

Reputation:

you have only give the property of box-sizing:border-box with universal selector and your issue will be resolved.

*{
box-sizing:border-box;
}

Upvotes: 0

Related Questions