Question 414125 in Html Question posted in
Some basic documentation can be found here.

Html – Changing from CSS grid layout to flexbox

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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search