Tips for effectively aligning CSS grids

Question

Tips for effectively aligning CSS grids

I am trying to format my page with a title in h4, a sub-title in h5, and 3 divs arranged like the image shown here:

https://i.sstatic.net/29EJV.png

This is my current 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>

However, I am facing an issue where my divs are shifted to the right and the titles are not aligned correctly as shown in this image: https://i.sstatic.net/E3lgP.png

Does anyone have any suggestions on how to fix this alignment issue?

Would combining Bootstrap 4 help align my titles and divs properly, or can it be achieved using only the grids?

html css twitter-bootstrap bootstrap-4 css-grid

Answer 1

Answer №1

If you want to achieve the desired layout without using flex, consider utilizing "grid-area" and "grid-area-template" as demonstrated in the code snippet below. Additionally, if you wish for a click on "2" to reveal a list, you can use hover effects combined with proper positioning to achieve this effect. Feel free to customize the code to suit your design needs.

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

    /* DEFINE GRID AREAS */
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }

.grid-container {
  display: grid;
  
  /* SPECIFY AREA LAYOUT */
    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>

Answer 2

If you want to achieve the desired layout without using flex, consider utilizing "grid-area" and "grid-area-template" as demonstrated in the code snippet below. Additionally, if you wish for a click on "2" to reveal a list, you can use hover effects combined with proper positioning to achieve this effect. Feel free to customize the code to suit your design needs.

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

    /* DEFINE GRID AREAS */
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }

.grid-container {
  display: grid;
  
  /* SPECIFY AREA LAYOUT */
    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>

Answer 3

Answer №2

To test the flexibility of the 2nd and 3rd items, you should detach the title and subtitle from the grid div for better separation. Please refer to the code snippet below and provide feedback.

$(".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>

Answer 4

To test the flexibility of the 2nd and 3rd items, you should detach the title and subtitle from the grid div for better separation. Please refer to the code snippet below and provide feedback.

$(".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>

Tips for effectively aligning CSS grids

Answer №1

Answer №2

Similar questions

Location of the webpage determined by the specific value

Having trouble with setting the margin-top of a div?

javascript conceal a div when clicked elsewhere

RequireJS is timing out while loading the runtime configuration

Ways to position buttons at the bottom of a webpage

allowing users to scale content and adjust layouts based on device characteristics

Swapping one div for another, all the while incorporating a limited number of buttons within the webpage

Flickering Button Displayed After Fade-In Animation

Creating a custom HTML layout: A step-by-step guide

How I disabled scrollbars in my HTML/CSS while implementing the Progid Microsoft gradient

Please choose only one selection from each of the two dropdown menus

Emphasize text within the input field

The size of my image decreases only when I transfer it to the phone screen

Whenever I create the code using javascript, padding seems to always show up

Mastering the technique of showcasing landscape using CSS3

Ways to reduce the size of images in Bootstrap 4

The margin of HTML is larger than that of the body

What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Pause jQuery at the conclusion and head back to the beginning

Oops! An error occurred while using the Google Maps API. Let's fix this hic