css - How to Ensure Uniform Product Card Layout with Min-Height and Responsive Design? - Stack Overflow

admin管理员组

文章数量:1122832

I am working on a product card layout for a shopping page. The page will display cards in a grid with multiple rows and columns. My goal is to ensure all product cards look uniform and balanced, regardless of their content length. Here's what I want to achieve:

1- The image container should take 65% of the height of the parent container.

2- The content container should take 35% of the height of the parent container.

3- All cards should have the same height by setting a min-height on the parent container.

4- The layout should be responsive with two columns on mobile screens.

The Problem:

I am encountering the following issues:

1- When I use flex: 0 0 65% for the image container and flex: 0 0 35% for the content container, the image container's size doesn't default to 65% of the parent container as expected.

2- If I add content (e.g., lorem * 35) in the image container, its size increases because of the content but not because of the image container's size.

3- If I use flex: 1 0 65% for the image container and flex: 0 0 35% for the content container, the image size increases, but the content container's size doesn’t stay at 35%.

            <div className="feature-item-img-container limited-item-img-container">


              <div
                className="limited-img-two"
                style={{
                  backgroundImage: `url("${product.images.secondImage}")`,
                }}
              > 

                
              <div className="feature-item-btn-container" >
                <p>Add to cart</p>
              </div>
              </div>

            </div>

.feature-item-img-container {
    flex: 1 0 65%; /* Child1 takes 65% of the height, effectively flex-grow 3 */
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    background-color: #FFDF00;
    position: relative;

    
}

.limited-img-two {
  
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit:  cover;
  transition: opacity 0.3s ease-in;

  background-size: cover; /* Ensure the image covers the entire div */
  background-position: center; /* Center the image within the div */
  background-repeat: no-repeat; /* Prevent repeating of the image */
  /* position: relative; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}


.limited-item-details-container {
  flex: 1 0  35%;
  background-color: aliceblue;
  

}

What I Need Help With:

1- How can I ensure the image container and content container** take up exactly 65% and 35% of the parent container height while respecting min-height?

2- Why does using flex: 1 0 65% for the image container cause the image size to increase, but the content size fails to stay at 35%?

3- What are the best practices developers use today to create uniform product card grids?

4- Are there any recommended resources or free source code websites where I can find reusable components for product card grids?

I am working on a product card layout for a shopping page. The page will display cards in a grid with multiple rows and columns. My goal is to ensure all product cards look uniform and balanced, regardless of their content length. Here's what I want to achieve:

1- The image container should take 65% of the height of the parent container.

2- The content container should take 35% of the height of the parent container.

3- All cards should have the same height by setting a min-height on the parent container.

4- The layout should be responsive with two columns on mobile screens.

The Problem:

I am encountering the following issues:

1- When I use flex: 0 0 65% for the image container and flex: 0 0 35% for the content container, the image container's size doesn't default to 65% of the parent container as expected.

2- If I add content (e.g., lorem * 35) in the image container, its size increases because of the content but not because of the image container's size.

3- If I use flex: 1 0 65% for the image container and flex: 0 0 35% for the content container, the image size increases, but the content container's size doesn’t stay at 35%.

            <div className="feature-item-img-container limited-item-img-container">


              <div
                className="limited-img-two"
                style={{
                  backgroundImage: `url("${product.images.secondImage}")`,
                }}
              > 

                
              <div className="feature-item-btn-container" >
                <p>Add to cart</p>
              </div>
              </div>

            </div>

.feature-item-img-container {
    flex: 1 0 65%; /* Child1 takes 65% of the height, effectively flex-grow 3 */
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    background-color: #FFDF00;
    position: relative;

    
}

.limited-img-two {
  
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit:  cover;
  transition: opacity 0.3s ease-in;

  background-size: cover; /* Ensure the image covers the entire div */
  background-position: center; /* Center the image within the div */
  background-repeat: no-repeat; /* Prevent repeating of the image */
  /* position: relative; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}


.limited-item-details-container {
  flex: 1 0  35%;
  background-color: aliceblue;
  

}

What I Need Help With:

1- How can I ensure the image container and content container** take up exactly 65% and 35% of the parent container height while respecting min-height?

2- Why does using flex: 1 0 65% for the image container cause the image size to increase, but the content size fails to stay at 35%?

3- What are the best practices developers use today to create uniform product card grids?

4- Are there any recommended resources or free source code websites where I can find reusable components for product card grids?

• css
• flexbox
• responsive-design
• grid-layout

Share Improve this question Follow asked yesterday Huzaifa ZahidHuzaifa Zahid 3544 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Using flex is the most troublesome thing you are doing here. You should be using grid as grid makes sure the width and height are fixed across all elements and doesn't get affected by the proportion of the child (card) elements.

This is something you should be following:

<div class="grid-container">
  <div class="feature-item-img-container limited-item-img-container">
    <div
      class="limited-img-two"
      style="background-image: url('your-image-url.jpg');"
    >
      <div class="feature-item-btn-container">
        <p>Add to cart</p>
      </div>
    </div>
  </div>
  <!-- Repeat the above structure for more cards -->
</div>

/* Container Grid Layout */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Default: 2 columns */
  gap: 16px; /* Add spacing between cards */
  padding: 16px;
}

/* Adjust to 4 columns on larger screens like PC/Desktop */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card Styling */
.feature-item-img-container {
  position: relative;
  background-color: #f5f5f5; /* Placeholder background color */
  border-radius: 8px; /* Optional: Rounded corners */
  overflow: hidden;
}

/* Background Image */
.limited-img-two {
  height: 200px; /* Adjust height as needed, for your case 65% of parent */
  background-size: cover;
  background-position: center;
}

/* Button Container */
.feature-item-btn-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: #fff;
  padding: 8px;
  font-size: 16px;
}

Let me know if you require any changes.

本文标签： cssHow to Ensure Uniform Product Card Layout with MinHeight and Responsive DesignStack Overflow