Html - Changing from CSS grid layout to flexbox

mdn70
November 7, 2024
105 views
1 vote
2 Answers

I was tasked with changing given code that was using CSS grid to one using CSS flexbox layout.

This was the given HTML structure:

<div class="listing-grid">
    <div class="listing">
        <img class="listing-image" src="something.jpg" alt="something">
        <div class="listing-details">
            <h3>Item 1</h3>
        </div>
        <div class="listing-price">
            <p>Price: €8</p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="something.jpg" alt="something">
        <div class="listing-details">
            <h3>Item 2</h3>
        </div>
        <div class="listing-price">
            <p>Price: €5/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

...(4 more of these card like elements)

<div>

.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px);
    gap: 10px;
    padding: 10px;
    justify-content: center;
    align-content: center;
}

The code produced a grid that looked like this:

item1 item2 item3 item4
item5 item6

When I changed to flexbox using:

.listing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  justify-content: center;
  align-content: center;
}


and adding to:
.listing {
  width: calc(25% - 20px);
}

I got this kind of a layout:

item1 item2 item3 item4
      item5 item6

I tried changing the justify-content: center to justify-content: left, but this aligns the cards to the left and shifts the whole section to the left, which is not suitable for me. Also doing this, but adding margin-left seems like a dumb way to solve this, especially since it is not responsive.

Any other way to achieve this with preserving the responsive design and the desired card layout, while also using flexbox layout?

Answers

left is not a valid value for justify-content. You need to use the value start.

.listing-grid {
  justify-content: start;
}

A snippet to demonstrate:

body {
  margin: 1em;
  background: silver;
}

.listing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 10px;
  justify-content: start;
  align-content: center;
  background: white;
}

.listing {
  width: calc(25% - 10px);
}

.listing img {
  max-width: 100%;
}

.listing h3, .listing p {
  margin: 0;
}

<div class="listing-grid">
    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200/100" alt="something">
        <div class="listing-details">
            <h3>Item 1</h3>
        </div>
        <div class="listing-price">
            <p>Price: €1</p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200/100" alt="something">
        <div class="listing-details">
            <h3>Item 2</h3>
        </div>
        <div class="listing-price">
            <p>Price: €2</p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200/100" alt="something">
        <div class="listing-details">
            <h3>Item 3</h3>
        </div>
        <div class="listing-price">
            <p>Price: €3</p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200/100" alt="something">
        <div class="listing-details">
            <h3>Item 4</h3>
        </div>
        <div class="listing-price">
            <p>Price: €4</p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200/100" alt="something">
        <div class="listing-details">
            <h3>Item 5</h3>
        </div>
        <div class="listing-price">
            <p>Price: €5</p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="https://picsum.photos/200/100" alt="something">
        <div class="listing-details">
            <h3>Item 6</h3>
        </div>
        <div class="listing-price">
            <p>Price: €6</p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>
<div>

You just need to replace the justify-content: left to justify-content: start,

.listing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  justify-content: start;
  align-content: center;
}

.listing {
  width: calc(25% - 20px);
}

<div class="listing-grid">
    <div class="listing">
        <img class="listing-image" src="something.jpg" alt="something">
        <div class="listing-details">
            <h3>Item 1</h3>
        </div>
        <div class="listing-price">
            <p>Price: €8</p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

    <div class="listing">
        <img class="listing-image" src="something.jpg" alt="something">
        <div class="listing-details">
            <h3>Item 2</h3>
        </div>
        <div class="listing-price">
            <p>Price: €5/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>
<div class="listing">
        <img class="listing-image" src="something.jpg" alt="something">
        <div class="listing-details">
            <h3>Item 2</h3>
        </div>
        <div class="listing-price">
            <p>Price: €5/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>
<div class="listing">
        <img class="listing-image" src="something.jpg" alt="something">
        <div class="listing-details">
            <h3>Item 2</h3>
        </div>
        <div class="listing-price">
            <p>Price: €5/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>
<div class="listing">
        <img class="listing-image" src="something.jpg" alt="something">
        <div class="listing-details">
            <h3>Item 2</h3>
        </div>
        <div class="listing-price">
            <p>Price: €5/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>
<div class="listing">
        <img class="listing-image" src="something.jpg" alt="something">
        <div class="listing-details">
            <h3>Item 2</h3>
        </div>
        <div class="listing-price">
            <p>Price: €5/p>
        </div>
        <a href="details.html" class="details-button">Details</a>
    </div>

<div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Changing from CSS grid layout to flexbox

Answers