5 boxes that would house images

HTML & CSS
1

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.

700Ă—678 435 Bytes

2

This can be done with either CSS flex or grid.

Are you conversant with either of these methods?

3

I would want it to be responsive also.

4

Of course you would. :wink:

These will help you,eventually…

MDN - Basic Concepts of Flexbox

MDN - Basic Concepts of Grid Layout

5

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>
6

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

3 Likes
7

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

8

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
9

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

10

@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
11

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
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.