Tips for creating a grid design with evenly spaced row gaps

Question

Tips for creating a grid design with evenly spaced row gaps

I am currently working on a grid layout featuring cards of varying heights. My goal is to maintain a consistent gap between the cards, creating a mosaic-like design. I am utilizing Styled Components for this project, but the current code I have doesn't seem to achieve the desired result.

export const Wrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  grid-auto-rows: minmax(0, 1fr);
`;

export const Card = styled.div`
  background: #ffffff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: space-between;
  height: fit-content;
`;

I am seeking a solution to ensure that the gap between rows remains uniform, even when the card heights are not consistent.

https://i.sstatic.net/ya03z.png

css reactjs styled-components

Answer 1

Answer №1

One suggestion is to experiment with the column-count property. Although I haven't personally tried it before, it may meet your requirements as long as the order of items is not crucial. Alternatively, there might be some workarounds available, or someone else could provide more insights on this topic.

.container {
  column-count: 4;
  max-width: max-content;
  border: 1px solid red;
  padding: 8px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid blue;
  break-inside: avoid;
  width: 100px;
}

.first {
  height: 50px;
}

.second {
  height: 65px;
}

.third {
  height: 80px;
}

.fourth {
  height: 25px;
}

.fifth {
  height: 45px;
}

.sixth {
  height: 55px;
}

.seventh {
  height: 60px;
}

.eighth {
  height: 150px;
}

<div class="container">
  <div class="item first">
    1
  </div>
  <div class="item second">
    2
  </div>
  <div class="item third">
    3
  </div>
  <div class="item fourth">
    4
  </div>
  <div class="item fifth">
    5
  </div>
  <div class="item sixth">
    6
  </div>
  <div class="item seventh">
    7
  </div>
  <div class="item eighth">
    8
  </div>
</div>

Answer 2

One suggestion is to experiment with the column-count property. Although I haven't personally tried it before, it may meet your requirements as long as the order of items is not crucial. Alternatively, there might be some workarounds available, or someone else could provide more insights on this topic.

.container {
  column-count: 4;
  max-width: max-content;
  border: 1px solid red;
  padding: 8px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid blue;
  break-inside: avoid;
  width: 100px;
}

.first {
  height: 50px;
}

.second {
  height: 65px;
}

.third {
  height: 80px;
}

.fourth {
  height: 25px;
}

.fifth {
  height: 45px;
}

.sixth {
  height: 55px;
}

.seventh {
  height: 60px;
}

.eighth {
  height: 150px;
}

<div class="container">
  <div class="item first">
    1
  </div>
  <div class="item second">
    2
  </div>
  <div class="item third">
    3
  </div>
  <div class="item fourth">
    4
  </div>
  <div class="item fifth">
    5
  </div>
  <div class="item sixth">
    6
  </div>
  <div class="item seventh">
    7
  </div>
  <div class="item eighth">
    8
  </div>
</div>

Tips for creating a grid design with evenly spaced row gaps

Answer №1

Similar questions

Strange rendering issues when using the react material-ui dialog

Looking for some guidance with Bootstrap column layouts

Curved edges navigation bar design

Adjustable Material UI Switch that reflects the value, yet remains changeable

Unique Floating Bullet Icons Ascending When Enlarged

Can Mongoose be integrated into a Next.js API environment?

Modifying the default class styles from Bootstrap based on the HTML displayed in Devtools

Ways to repair the mouse hover transform scale effect (animation included)

What is the best way to set unique heights for various ion-grid components?

Ways to Achieve the Following with JavaScript, Cascading Style Sheets, and Hypertext

The div element on my website spans the entire width, yet it appears slightly narrower than the body

Establishing a boundary by incorporating a variable into a numerical value

Exploring Chakra UI: Constructing a Dynamic Page Shell with Sidebar Navigation

Is there a way to modify the height and width of a div layer?

Arranging List Items within a Container

Switching button appearance when hovered over

Issue with font selection on WordPress menu settingsI am having trouble getting my

How can we determine if the user is on a small device and utilizing flexbox with col-sm?

Positioning the HTML form in the middle of the page

Can React Router render various components based on a specific URL parameter value within the same route?