HTML/CSS: How do I create a 4x2 grid layout with images and buttons on the bottom of the image?-CodePudding

I want eight images with a collapsible button below each image to be formatted into a 4x2 grid. Below is a draft of what I'd like to achieve:correct

However, I'm getting the image and buttons stacked in one column: incorrect

This is the code I have; it uses CSS, HTML, and Javascript to allow for collapsing of the buttons.

<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* styles for grid container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    position: relative;
}
.grid-item {
    overflow: hidden;
}

/* styles for collapsible button */
.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}


/* styles for active button and hover effect */
.collapsible:hover {
    background-color: #555;
}

/* styles for plus/minus sign */
.collapsible:after {
    content: ' '; /* default content */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.collapsible.active:after {
    content: "-"; 
}

/* styles for collapsible content */
.content {
    width: 100%;
    padding: 0 18px;
    overflow: hidden;
    background-color: #f1f1f1;
    display: none;
} 
/* styles for collapsible content */
.content.active {
     display: block;
    }
</style>
<div >
    <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Bob, Course Director</button>
        <div >
            <p>Blahblah</p>
    </div>
    <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Sue, Board Member</button>
        <div >
            <p>blahblah</p>
    </div>
    <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Tim, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
    <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Jose, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
    <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Jason, Course Director</button>
        <div >
            <p>blahblah</p>
    </div>
    <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Amy, Board Member</button>
        <div >
            <p>blahblah</p>
    </div>
    <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Gosia, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
    <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Alex, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i  ) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        content.classList.toggle("active");
    });
}
</script>

CodePudding user response：

I have checked your code. On your code, there is no end div tag for every grid-item. If you add end tag, you can get the result you want.

I have added full code here.

<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  /* styles for grid container */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    position: relative;
  }

  .grid-item {
    overflow: hidden;
  }

  /* styles for collapsible button */
  .collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }


  /* styles for active button and hover effect */
  .collapsible:hover {
    background-color: #555;
  }

  /* styles for plus/minus sign */
  .collapsible:after {
    content: ' ';
    /* default content */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
  }

  .collapsible.active:after {
    content: "-";
  }

  /* styles for collapsible content */
  .content {
    width: 100%;
    padding: 0 18px;
    overflow: hidden;
    background-color: #f1f1f1;
    display: none;
  }

  /* styles for collapsible content */
  .content.active {
    display: block;
  }
</style>
<div >
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304"
      alt="" /> <button type="button" >Bob, Course Director</button>
    <div >
      <p>Blahblah</p>
    </div>
  </div>
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304"
      alt="" /> <button type="button" >Sue, Board Member</button>
    <div >
      <p>blahblah</p>
    </div>
  </div>
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304"
      alt="" /> <button type="button" >Tim, Instructor</button>
    <div >
      <p>blahblah</p>
    </div>
  </div>
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304"
      alt="" /> <button type="button" >Jose, Instructor</button>
    <div >
      <p>blahblah</p>
    </div>
  </div>
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304"
      alt="" /> <button type="button" >Jason, Course Director</button>
    <div >
      <p>blahblah</p>
    </div>
  </div>
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304"
      alt="" /> <button type="button" >Amy, Board Member</button>
    <div >
      <p>blahblah</p>
    </div>
  </div>
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304"
      alt="" /> <button type="button" >Gosia, Instructor</button>
    <div >
      <p>blahblah</p>
    </div>
  </div>
  <div >
    <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304"
      alt="" /> <button type="button" >Alex, Instructor</button>
    <div >
      <p>blahblah</p>
    </div>
  </div>
  <script>
    var coll = document.getElementsByClassName("collapsible");
    for (var i = 0; i < coll.length; i  ) {
      coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        content.classList.toggle("active");
      });
    }
  </script>

CodePudding user response：

Not sure if this is the best solution but a table would work the most reliably

like this

<table>

<tr> <- row 1
   <th>item 1</th>
   <th>item 2</th>
   <th>item 3</th>
   <th>item 4</th>
</tr>

<tr> <- row 2
   <th>item 1</th>
   <th>item 2</th>
   <th>item 3</th>
   <th>item 4</th>
</tr>

</table>

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
    /* styles for grid container */
    .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        position: relative;
    }
    .grid-item {
        overflow: hidden;
    }

    /* styles for collapsible button */
    .collapsible {
        background-color: #777;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
    }


    /* styles for active button and hover effect */
    .collapsible:hover {
        background-color: #555;
    }

    /* styles for plus/minus sign */
    .collapsible:after {
        content: ' '; /* default content */
        font-size: 13px;
        color: white;
        float: right;
        margin-left: 5px;
    }

    .collapsible.active:after {
        content: "-"; 
    }

    /* styles for collapsible content */
    .content {
        width: 100%;
        padding: 0 18px;
        overflow: hidden;
        background-color: #f1f1f1;
        display: none;
    } 
    /* styles for collapsible content */
    .content.active {
         display: block;
        }
    </style>
    <div >



        <table>
          <tr>
     
     <th>
  <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Alex, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
</th>
     <th>
  <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Alex, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
</th>
     <th>
  <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Alex, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
</th>
     <th>
  <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Alex, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
</th>
          </tr>


          <tr>
               <th>
  <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Alex, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
</th>
     <th>
  <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Alex, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
</th>
     <th>
  <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Alex, Instructor</button>
        <div >
            <p>blahblah</p>
    </div>
     </th>
     <th>
     <div >
        <img src="https://cdn.shopify.com/s/files/1/0567/9847/8524/files/missingProductImage_240x240.png?v=1665864304" alt="" /> <button type="button" >Alex, Instructor</button>
        <div >
            <p>blahblah</p>
      </div>
     </th>
          </tr>
        </table>


    </div>
    <script>
    var coll = document.getElementsByClassName("collapsible");
    for (var i = 0; i < coll.length; i  ) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            content.classList.toggle("active");
        });
    }
    </script>