How to correctly align css grids-CodePudding

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:

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 >
  <h4>Title 1</h4>
  <h5>SubTitle 1</h5>
  <div >1</div>
  <div >2</div>
  <div >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

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

CodePudding user response：

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.

.grid-container {
  display: grid;
  column-gap: 50px;
  grid-template-columns:auto;
  background-color: #2196F3;
  padding: 10px;
  grid-gap: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;
  
}

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

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div>
  <h4>Title 1</h4>
  <h5>SubTitle 1</h5>
  <div >
  <div >1</div>
      <div >
        <div >2</div>
        <div >3</div>   
      </div>
</div>

</body>
</html>

CodePudding user response：

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 >
  <h4 >Title 1</h4>
  <h5 >SubTitle 1</h5>
  <div >1</div>
  <div >2
      <ul >
          <li><a href="#"></a>Hello</li>
          <li><a href="#"></a>Hiii</li>
      </ul>
  </div>
  <div >3</div>  
</div>
</body>
</html>