5 boxes that would house images

I am trying to make this:

Form this design.

5 boxes that would house images.

One box is top left
Another box is top right.
Another box is in the middle.
Another box is bottom left.
Another box is bottom right.

This can be done with either CSS flex or grid.

Are you conversant with either of these methods?

I would want it to be responsive also.

Of course you would. :wink:

These will help you,eventually…

MDN - Basic Concepts of Flexbox

MDN - Basic Concepts of Grid Layout

AI came up with this:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      height: 100vh;
    }
    
    .box {
      flex: 1 1 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: lightgray;
      border: 1px solid gray;
      box-sizing: border-box;
    }
    
    .top-left {
      order: 1;
    }
    
    .top-right {
      order: 2;
    }
    
    .middle {
      order: 3;
    }
    
    .bottom-left {
      order: 4;
    }
    
    .bottom-right {
      order: 5;
    }
    
    @media (max-width: 768px) {  /* Adjust breakpoint as needed */
      .box {
        flex-basis: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box top-left">Top Left</div>
    <div class="box top-right">Top Right</div>
    <div class="box middle">Middle</div>
    <div class="box bottom-left">Bottom Left</div>
    <div class="box bottom-right">Bottom Right</div>
  </div>
</body>
</html>

So, basically you do not want learn coding methodology,
but instead preference is to use C & P?

3 Likes

That doesn’t look anything like what you asked for?

PO came up with this:

Of course there are a million unanswered questions about how this should behave and as @snadyleiby said you really try first yourself before copying and pasting otherwise you will never learn the techniques needed.

Admirable try but I guess you’ve not seen any of asasass previous posts then :slight_smile:

4 Likes

Read the CSS specification (MDN) .It’s helpful for these things.I have read it (along with html specs,js in progress).

@PaulOB Just tinkering with your example, but if you use a percentage for padding on the .box class it gives a consistent gap on resizing.

.box{
  margin:auto;
  padding:3%;
}

Good, bad, I don’t know :slight_smile:

1 Like

OK, so it seems that the O.P. waits until a C&P reply is
forthcoming. :wink:

OK, C&P this…
index.html

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Quintuple images</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

 <h1>Quintuple images</h1>
  <div id="image-container">
   <div>
    <img src="https://dummyimage.com/10x10/f05c1d/f05c1d.jpg" alt="1">
    <img src="https://dummyimage.com/10x10/f05c1d/f05c1d.jpg" alt="2">
   </div>
   <div>
    <img src="https://dummyimage.com/10x10/f05c1d/f05c1d.jpg" alt="3">
   </div>
   <div>
    <img src="https://dummyimage.com/10x10/f05c1d/f05c1d.jpg" alt="4">
    <img src="https://dummyimage.com/10x10/f05c1d/f05c1d.jpg" alt="5">
   </div>
  </div>

</body>
</html>

screen.css

* {
  box-sizing: border-box;
 }
 body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5  arial, helvetica, sans-serif;
 }
 h1 {
   font-size: 1.5em;
   font-weight: normal;
   color: #444;
   text-align: center;
 }
#image-container {
   display: flex;
   flex-direction: column;
   gap: 2vw;        /* ( 2 x value = 4vw ) */ 
 /* max-width value is equal to 
   ( 3 x img width ) + ( 2 x gap value ) + ( 2 x padding value ) */
   max-width: 38vw; 
   padding: 2vw;    /* ( 2 x value = 4vw ) */   
   margin: auto;
   background-color: #000;
 }   
#image-container div {
   display: flex;
 }
#image-container div:nth-of-type(1),
#image-container div:nth-of-type(3) {
   justify-content: space-between;
 }
#image-container div:nth-of-type(2) {
   justify-content: center;
 }
#image-container img {
   width: 10vw;        /* ( 3 x value = 30vw )*/
   border: 0.2em solid #fff;
 }
2 Likes