[Resolved] Responsive grid last rows

[Author]

Posts

[Puntorosso]

Hi, having trouble creating a responsive pictures grid. The following code works, but sometime, when changing the browser window width, the last rows show a weird number of items. Any help is appreciated. Thanks. Best.

[wpv-layout-start]
<div class="modgrid">
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <div class="wpv-loop js-wpv-loop">
        <wpv-loop wrap="4" pad="true">
            [wpv-item index=1]
            <div class="row">
                <div class="column">
				[wpv-post-body view_template="loop-item-in-artists-grid"]
			</div>
            [wpv-item index=other]
                <div class="column">
				[wpv-post-body view_template="loop-item-in-artists-grid"]
			</div>
            [wpv-item index=4]
                <div class="column">
				[wpv-post-body view_template="loop-item-in-artists-grid"]
				</div>
            </div>
            [wpv-item index=pad]
                <div class="column"></div>
            [wpv-item index=pad-last]
                <div class="column"></div>
        </wpv-loop>
	</div>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No Artists found[/wpml-string]</strong>
	[/wpv-no-items-found]
</div>
[wpv-layout-end]

.artistgrid {
    display: flex;
    justify-content: center;
    width: 100%;
}

.wpv-loop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center columns within the grid */
    gap: 10px; /* Add gap between items */
    width: 100%;
}

.column {
    flex: 0 1 23%; /* Adjusted to slightly less than 25% */
    max-width: 23%;
    box-sizing: border-box;
    padding: 5px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

@media (max-width: 900px) {
    .column {
        flex: 0 1 48%; /* Slightly less than 50% for two columns */
        max-width: 48%;
    }
}

@media (max-width: 600px) {
    .column {
        flex: 0 1 98%; /* Nearly full width for single column */
        max-width: 98%;
    }
}

And this are the items:

<div class="artist-card"> 
  <a href="[wpv-taxonomy-url]">
	[wpv-conditional if="( '[types termmeta='artist-photo' output='raw'][/types]' ne '' )"]
    	<div class="artist-card-img"><img src="[types termmeta='artist-photo' size='medium' url='true'][/types]"/></div>
    [/wpv-conditional]
	[wpv-conditional if="( '[types termmeta='artist-photo' output='raw'][/types]' eq '' )"]
    	<div class="artist-card-img"><img src="/wp-content/uploads/2025/01/artist-default.jpg"/></div>
    [/wpv-conditional]  
    	<div class="artist-card-name">
          <div class="artist-name">[wpv-taxonomy-title]</div>
    	</div>
  </a>
</div>

.artist-card {
    text-align: center;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 300px;
    height: auto;
}

.artist-card-img {
    height: 300px;
    overflow: hidden; /* Ensure any overflow is hidden */
}

.artist-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fill the space */
    object-position: center; /* Center the cropped image */
}

.artist-card-name {
    display: flex;
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    height: 50px;
}

.artist-name {
    font-family: Lato, sans-serif;
    font-size: 18px;
    color: #333;
}

[Christopher Amirian]

Hi,

Welcome to Toolset support. This is indeed a custom coding request and is outside of our support scope.

We will not be able to delve into your code as it is not related with the functionality of Toolset itself.

I can give you some general suggestions but that is the extend that we can be of help here:

1. Adjust Flexbox Handling

Your .column class currently uses flex: 0 1 23%;, which might create alignment issues. Try updating it to:

.column {
    flex: 1 1 calc(25% - 20px); /* Ensure consistent four columns with gap considered */
    max-width: calc(25% - 20px);
    box-sizing: border-box;
    padding: 5px;
    background-color: #f9f9f9;
    border-radius: 4px;
}
 
@media (max-width: 900px) {
    .column {
        flex: 1 1 calc(50% - 20px); /* Two columns */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 600px) {
    .column {
        flex: 1 1 calc(100% - 20px); /* Single column */
        max-width: calc(100% - 20px);
    }
}

- The calc() function helps subtract the gaps dynamically, ensuring proper alignment.
- flex: 1 1 allows items to grow/shrink as needed without overflowing.

2. Fix Gaps and Spacing

Add uniform spacing using gap:

.wpv-loop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Ensures spacing adjusts dynamically */
    gap: 10px;
}

Using justify-content: space-between; instead of center might help with alignment issues by evenly distributing items.

3. Fix WordPress View Structure Padding

Your wpv-loop structure currently adds empty columns ([wpv-item index=pad] and [wpv-item index=pad-last]), which can lead to unexpected layout shifts. Instead, remove them and use CSS :nth-child() selectors to handle styling.

Alternatively, you can keep the padding logic but ensure it's only added when necessary by dynamically checking the item count in WordPress.

4. Ensure Consistent Widths

Instead of using absolute pixel values for .artist-card, use percentage-based sizing to align with the flex grid:

.artist-card {
    width: 100%;
    max-width: 100%;
}

You are welcome to ask for help from a professional by hiring a developer using the link below:

https://toolset.com/contractors/

Thanks.