0

I have this in html

body {
  margin: 10px;
  text-align: center;
  width: 380px;
}

.row {
  display: grid;
  grid-template-columns: 180px 180px 180px 180px;
  grid-gap: 10px;
}

.item {
  color: white;
  padding: 1.5em 0;
  font-size: 2em;
  justify-content: center;
}

.a {
  background: #0d9;
}

.b {
  background: #d90;
}

.c {
  background: #9d0;
}

.d {
  background: #90d;
}

.e {
  background: #d09;
}

.f {
  background: #09d;
}

.g {
  background: #09d;
}

.h {
  background: #09d;
}
<div class="row">

  <!--main divs-->
  <div class="item a" id="adventureHolidays">
    <p>Adventure Holidays</p>
  </div>
  <div class="item b" id="backpacking">
    <p>Backpacking</p>
  </div>
  <div class="item c" id="cruiseHolidays">
    <p>Cruise Holidays</p>
  </div>
  <div class="item d" id="eventTravel">
    <p>Event Travel</p>
  </div>
  <div class="item e" id="packageHoliday">
    <p>Package Holiday</p>
  </div>
  <div class="item f" id="safari">
    <p>Safari</p>
  </div>
  <div class="item g" id="skiingAndSnowboarding">
    <p>Skiing and Snowboarding</p>
  </div>
  <div class="item h" id="volunteering">
    <p>Volunteering</p>
  </div>

</div>

I tried a lot of tricks from already asked questions here and no one works for me, every time my grid is or bad positioned or nothing changed. I tried with place-items: center; but then I don't have gap between them, also tried with justify-content: center; but then all my divs are one below other. And also, How I can put it a bit down? Any help?

DBS
  • 9,110
  • 4
  • 35
  • 53
Sefan Jankovic
  • 13
  • 4
  • 1
    Which part exactly are you trying to centre? (The entire grid as a whole? The items in the grid? The text inside those items?) And do you mean centre horizontally, vertically, or both? – DBS Jul 11 '22 at 16:23

2 Answers2

0

Add the following CSS:

.item {
    display: grid;
}

.item p {
    margin: auto;
}
asportnoy
  • 2,218
  • 2
  • 17
  • 31
  • @SefanJankovic If you feel an answer solved the problem, please mark it as 'accepted' by clicking the check mark on the left. – asportnoy Jul 11 '22 at 20:19
  • Thank you for helping, but answer from Tharindu was more helpful and actually did a better job. Thank you again! – Sefan Jankovic Jul 14 '22 at 07:23
0

Use the following CSS:

body {
    margin: 10px;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}
Tharindu Lakshan
  • 97
  • 5