How to place a div centered inside a other div (Just a smaller rectangle inside a big one)?

Question

I'm trying to center all the "boxes" inside the boxes. It should be also maintain measures when I'm changing the window size. I'm also trying to distribute the yellow boxes equally inside the purple one. I tried to different CSS alignments but failed it getting a solid structure. I want especially the purple box with yellow boxes centered in the green box.

Thanks for your tips!

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 99%;
  margin-left: 0.25%;
  height: 98vh;

}
.buildground {
  display: grid;
  border: 1px solid;
  border-color: purple;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 80%;
  height: 80%;




}

.ground-item{
  border: 1px solid orange;
  width: 100%;
  height: 100%;

}


.buildarea {

  border: 1px solid green;
  margin: 10px;
  justify-content: space-around


}

.two{
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;

}
.three{
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;


}
.four{
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;


}

<div class="wrapper">
    <div class="buildarea">
      <div class="buildground">
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>
          <div class="ground-item">1</div>

      </div>



    </div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
  </div>

sorry i edit the post. I want especially the purple box with yellow boxes centered in the green box. — Izzy030, Sep 26 '19 at 14:51
Try [Flex Layout](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), very powerful and very easy to use. — , Sep 26 '19 at 14:52

score 0 · Accepted Answer · answered Sep 26 '19 at 15:00

Add flexbox to designarea to center horizonatally and align-self:center to .buildground

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 99%;
  margin-left: 0.25%;
  height: 98vh;
}

.buildground {
  display: grid;
  border: 1px solid;
  border-color: purple;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 80%;
  height: 80%;
  align-self: center;
  /* this */
}

.ground-item {
  border: 1px solid orange;
}

.buildarea {
  display: flex;
  /* this */
  border: 1px solid green;
  margin: 10px;
  justify-content: space-around;
}

.two {
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;
}

.three {
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;
}

.four {
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;
}

<div class="wrapper">
  <div class="buildarea">
    <div class="buildground">
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>
      <div class="ground-item">1</div>

    </div>



  </div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

How to place a div centered inside a other div (Just a smaller rectangle inside a big one)?

1 Answers1