'How to correctly align css grids

I want to have on my page a title in h4, a sub-title in h5 and then 3 divs arrange in the way of this image:

enter image description here

I have this html code :

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <h4>Title 1</h4>
  <h5>SubTitle 1</h5>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
</div>

</body>
</html>

But the problem I have is that my divs are all shifted to the right and my titles are not aligned as in the previous image enter image description here

Does anyone have an idea?

Is it possible to combine with bootstrap 4 to align my titles and divs correctly or just with my grids it can be aligned correctly

htmlcsstwitter-bootstrapbootstrap-4grid


Solution 1:[1]

rather than using flex you can achieve your desired result simply by using "grid-area" and "grid-area-template". You can see the code below to understand. Also you wanted that if someone clicks on "2" the a "ul" gets visible. So for the there is now click selector in CSS but I used hover and position the element accordingly. You can change and play with the code to get the design you require.

<!DOCTYPE html>
<html>
<head>
<style>

    /* NAME THE AREAS , CAN BE NAMED ANYTHING */
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }

.grid-container {
  display: grid;
  
  /* describing which area item will take how much space */
    grid-template-areas:
        'item1 item1 item1 item1 item1 item1'
        'item2 item2 item2 item2 item2 item2'
        'item3 item3 item3 item3 item3 item3'
        'item4 item4 item4 item5 item5 item5';
  column-gap: 50px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  margin-bottom: 35px;
}
.item4{
    position: relative;
}
.item4 .list{
    display: none;
    position: absolute;
    right: 250px;
    top: 0;
}

.item4 li{
    list-style: none;
    font-size: 20px;
    border: 2px solid black;
    padding: 3px 20px;
    margin-bottom: 2px;
    background-color: bisque;
}
.item4 li a{
    text-decoration: none;
}
.item4:hover > .list{
    display: block;
}
</style>
</head>
<body>

<div class="grid-container">
  <h4 class="item1">Title 1</h4>
  <h5 class="item2">SubTitle 1</h5>
  <div class="grid-item item3">1</div>
  <div class="grid-item item4">2
      <ul class="list">
          <li><a href="#"></a>Hello</li>
          <li><a href="#"></a>Hiii</li>
      </ul>
  </div>
  <div class="grid-item item5">3</div>  
</div>
</body>
</html>

Solution 2:[2]

You can try to flex the 2nd and 3rd items then you need to remove the title and subtitle out of the grid div so they are separated. See the sample below from your code and let me know.

$(".item2").click(function(){
  $(".popup").toggle();
});
.grid-container {
  display: grid;
  column-gap: 50px;
  grid-template-columns:auto;
  background-color: #2196F3;
  padding: 10px;
  grid-gap:10px;
  max-width:600px;

}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  cursor:pointer;
  font-weight:bold;
}

.grid-item2 {
  display:flex;
  justify-content:space-evenly;
  width:100%;
  grid-gap:10px;
}

.grid-item2 > div {width:100%;}

.popup {
  height: auto;
  max-width: 250px;
  border: 1px solid gray;
  border-radius: 20px;
  display: none;
  position: relative;
  align-items: center;
  text-align: center;
  z-index: 1;
  margin-top:-60px;
  background-color:white;

 }
 
 .popup img {
  height:50px;
  width:50px;
  object-fit:cover;
  
  }

.fruit-mango {
    display:flex;
    align-items:center;
    justify-content:center;
    grid-gap:20px;
    }
<!DOCTYPE html>
<html>
<head>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>

<div>
  <h4>Title 1</h4>
  <h5>SubTitle 1</h5>
  <div class="grid-container">
  <div class="grid-item">1</div>
      <div class="grid-item2">
        <div class="grid-item item2">2</div>  
        <div class="grid-item">3</div>   
      </div>
</div>
<div class="popup" >
      <div class="fruit-mango">
        <img src="https://photos2.fotosearch.com/bthumb/CSP/CSP994/mango-clip-art__k16208308.jpg">
        <span >MANGO FR</span><br>
        </div>
        <hr>
        <div class="fruit-mango">
        <img src="https://photos2.fotosearch.com/bthumb/CSP/CSP994/mango-clip-art__k16208308.jpg">
        <span class="fruit">MANGO EN</span>
      </div>
</div>

</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sameer
Solution 2

Related Questions