How can I change size of my first and last container in css flexbox?

Question

I'm learning CSS and I have a problem with CSS flexbox and grid.

I wanted to make a grid as shown above but I couldn't. The first and last containers are in different sizes and the others are the same.

Here is my code:

.second-section {
  width: 80%;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  position: relative;
  flex-wrap: wrap;
}

.category-devider {
  width: 80%;
  margin: 0 auto;
}

.category-devider p {
  font-size: 16px;
}

.category-devider span {
  font-size: 18px;
  color: #757575;
}

.image-containers {
  position: relative;
  width: 45%;
  margin: 50px auto;
  height: 434px;
  background-color: #494949;
  display: block;
  text-align: center;
}

.image-containers h3 {
  font-size: 18px;
}

.second-section #img-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.img1 img {
  height: 612px;
}

    <div class="second-section">
      <div class="image-containers img1">
        <img src="/img/apple-watch.jpg" alt="Apple Watch" />
        <h3>Rule ratio</h3>
        <p>Product design</p>
      </div>
      <div class="image-containers img2">
        <img src="/img/circle.jpg" alt="Situation" />
        <h3>Situation</h3>
        <p>Visual identity</p>
      </div>
      <div class="image-containers img3">
        <img src="/img/cards.jpg" alt="Cards" />
        <h3>Dry air</h3>
        <p>User research</p>
      </div>
      <div class="image-containers img4">
        <img src="/img/orange-phone.jpeg" alt="Phone" />
        <h3>Vertical</h3>
        <p>Product design</p>
      </div>
      <div class="image-containers img5">
        <img src="/img/phone.jpg" alt="Phone" />
        <h3>Variable compose</h3>
        <p>Product design</p>
      </div>
      <div class="image-containers img6">
        <img src="/img/phone1.jpg" alt="Phone" />
        <h3>Scope shift</h3>
        <p>Product design</p>
      </div>
    </div>

If Size is different you can provide the inline css for that Tag To Equal The Height — Rushabh Gandhi, Sep 12 '22 at 06:56
Does this answer your question? [CSS-only masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) — tacoshy, Sep 12 '22 at 07:40
use pseudo-selectors `:first child` and `last-child` and then use `flex-grow` on it. — tacoshy, Sep 12 '22 at 07:43

score 0 · Answer 1 · answered Sep 12 '22 at 14:12

You can make array of objects:

{
 name: 'name',
 title: 'title',
 text: 'text'
}

and write:

<div class="second-section">
 {array.map((picture, index) => {
   <div class={`image-containers img${index}`}>
     <img src={`/img/${name}.jpg`} alt="Phone" />
     <h3>{picture.title}</h3>
     <p>{picture.text}</p>
   </div>
 })}
</div>

How can I change size of my first and last container in css flexbox?

1 Answers1