I’m on wordpress and want to have a portfolio with css grid.
All items are get one column except some of the items are double width with style span 2 when admin wants to (with acf ture/false).
In some scenarios I have a free column.
As I know today that there is no solution in css. maybe javascript or php can handle it!
If you know how to fix this with any kind (even change grid to flex or use float) it would be much appreciated!
this is the picture of one of the scenarios that this problem occur and this is my code so far:
const project = document.querySelector(".project");
const projectBtn = document.querySelectorAll(".project--btn");
const projectList = document.querySelectorAll(".project__list");
project.onclick = e => {
const tabId = e.target.dataset.id;
if (tabId) {
projectBtn.forEach(btn => {
btn.classList.remove("active");
});
e.target.classList.add("active");
projectList.forEach(content => {
content.classList.remove("active");
});
const projectTab = document.getElementById(tabId);
projectTab.classList.add("active");
}
}.project {
width: 100%;
margin: 50px auto;
}
.project__button-wrapper {
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.project--btn {
background: transparent;
border: 0;
padding: 12px 20px;
cursor: pointer;
font-size: 14px;
line-height: 26px;
}
.project--btn.active {
border-bottom: 2px solid #000;
}
.project__list {
padding: 0;
display: none;
grid-template-columns: repeat(5, 1fr);
flex-wrap: wrap;
gap: 20px;
}
.project__list.active {
display: grid;
}
.project__item {
height: 300px;
border-radius: 15px;
overflow: hidden;
}
.project__link {
width: 100%;
min-height: 100%;
max-height: 100%;
display: grid !important;
}
.project__link--img {
width: 100%;
min-height: 100%;
max-height: 100%;
grid-column: 1;
grid-row: 1;
object-fit: cover;
}
.project__link--overlay {
padding: 20px;
background: rgba(255, 255, 255, 0.32);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.7px);
-webkit-backdrop-filter: blur(4.7px);
color: #fff;
opacity: 0;
grid-column: 1;
grid-row: 1;
align-self: end;
}
.project__link--title {
font-size: 18px;
font-weight: 600;
line-height: 30px;
}
.project__link--excerpt {
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.project__link--overlay-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.project__link--category {
font-size: 12px;
font-weight: 300;
line-height: 16px;
display: block;
text-align: end;
}
.project__link:hover .project__link--overlay {
opacity: 1;
}
@media only screen and (max-width: 1140px) {
.project__list {
grid-template-columns: repeat(4, 1fr);
}
}
@media only screen and (max-width: 767px) {
.project__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 575px) {
.project__list {
grid-template-columns: repeat(1, 1fr);
}
.project__item{
grid-column: 1 !important;
}
}
/*@media only screen and (min-width: 992px) {
.project__list {
grid-template-columns: repeat(4, 1fr);
}
}
@media only screen and (min-width: 1200px) {
.project__list {
grid-template-columns: repeat(5, 1fr);
}
}*/<?php
// Shortcode: [project_shortcode]
add_shortcode('project_shortcode', 'company_porjects');
function company_porjects()
{
ob_start(); ?>
<div class="project">
<?php
$queryCats = get_terms(array(
'taxonomy' => 'category',
'hide_empty' => true
));
?>
<div class="project__button-wrapper">
<button class="project--btn active" data-id="tabAll">همه پروژه ها</button>
<?php foreach ($queryCats as $cat) { ?>
<button class="project--btn" data-id="tab<?php echo $cat->term_id; ?>"><?php echo $cat->name; ?></button>
<?php } ?>
</div>
<div class="project__content-wrapper">
<?php $allPortfolio = new WP_Query(array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'rand'
)); ?>
<ul class="project__list active" id="tabAll">
<?php $itemOrderAll = 1;
while ($allPortfolio->have_posts()) {
$allPortfolio->the_post();
?>
<li class="project__item" style="order:<?php echo $itemOrderAll ?>;<?php if (get_field('double_width')) { ?> grid-column: span 2; <?php } ?>;">
<a href="<?php the_permalink(); ?>" class="project__link">
<?php the_post_thumbnail('medium', array('class' => 'project__link--img')); ?>
<div class="project__link--overlay">
<h3 class="project__link--title"><?php the_title(); ?></h3>
<p class="project__link--excerpt"><?php the_excerpt(); ?></p>
<span class="project__link--category"><?php the_category(); ?></span>
</div>
</a>
</li>
<?php
$itemOrderAll++;
} ?>
<?php wp_reset_postdata(); ?>
</ul>
<?php foreach ($queryCats as $cat) { ?>
<?php $queryPortfolio = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => -1,
'orderby' => 'rand',
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => $cat->term_id,
'operator' => 'IN'
)
)
)); ?>
<ul class="project__list" id="tab<?php echo $cat->term_id; ?>">
<?php $itemOrder = 1;
while ($queryPortfolio->have_posts()) {
$queryPortfolio->the_post(); ?>
<li class="project__item" style="<?php if (get_field('double_width')) { ?> grid-column: span 2;<?php } ?>">
<a href="<?php the_permalink(); ?>" class="project__link">
<?php the_post_thumbnail('medium', array('class' => 'project__link--img')); ?>
<div class="project__link--overlay">
<h3 class="project__link--title"><?php the_title(); ?></h3>
<span class="project__link--category"><?php the_category(); ?></span>
</div>
</a>
</li>
<?php
$itemOrder++;
} ?>
</ul>
<?php } ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
<?php
$project_content = ob_get_contents();
ob_get_clean();
return $project_content;
wp_reset_postdata();
}