CSS сетка складывается на рабочем столе
Я создал страницу для отображения сетки, но CSS-сетка отображается в виде рабочего стола. Я не могу понять, почему это происходит. Вот код:
CSS
Я добавил <div class="row"> а также, чтобы указать, что они являются частью одного ряда. Я попытался разделить его на 4 столбца, а затем использовать диапазон, чтобы указать ширину. Но никто из них не
#grid-list-page {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1px;
}
.listUL {
padding: 2px;
margin: 1px;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.listUL li a {
text-decoration: none;
font-size: 1em;
padding: 0;
}
@media (max-width: 700px) {
#grid-list-page {
grid-template-columns: 1fr;
}
} <div id="grid-list-page">
<div class="row">
<div class="grid-item">
<h4>List for USA</h4>
<ul id="usalistUL" class="listUL">
<?php
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'meta_query' => array(
array(
'key' => 'list_country',
'value' => 'usa',
),
),
);
$usaposts = get_posts($args);
foreach($usaposts as $usapost) {
$post_id = $usapost->ID; ?>
<li>
<a href="<?php echo get_the_permalink($post_id); ?>"><?php echo get_the_title($post_id); ?></a>
</li>
<?php } ?>
</ul>
</div>
<div class="grid-item">
<h4>List for Canada</h4>
<ul id="canlistUL" class="listUL">
<?php
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'meta_query' => array(
array(
'key' => 'list_country',
'value' => 'canada',
),
),
);
$canposts = get_posts($args);
foreach($canposts as $canpost) {
$post_id = $canpost->ID; ?>
<li>
<a href="<?php echo get_the_permalink($post_id); ?>"><?php echo get_the_title($post_id); ?></a>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>Решение
Я удалил <div class="row> </div> и это похоже на работу. Вот HTML-код:
<div id="grid-list-page">
<div class="grid-item">
<h4>List for USA</h4>
<ul id="usalistUL" class="listUL">
<?php
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'meta_query' => array(
array(
'key' => 'list_country',
'value' => 'usa',
),
),
);
$usaposts = get_posts($args);
foreach($usaposts as $usapost) {
$post_id = $usapost->ID; ?>
<li>
<a href="<?php echo get_the_permalink($post_id); ?>"><?php echo get_the_title($post_id); ?></a>
</li>
<?php } ?>
</ul>
</div>
<div class="grid-item">
<h4>List for Canada</h4>
<ul id="canlistUL" class="listUL">
<?php
$args = array(
'post_type' => 'post',
'numberposts' => -1,
'meta_query' => array(
array(
'key' => 'list_country',
'value' => 'canada',
),
),
);
$canposts = get_posts($args);
foreach($canposts as $canpost) {
$post_id = $canpost->ID; ?>
<li>
<a href="<?php echo get_the_permalink($post_id); ?>"><?php echo get_the_title($post_id); ?></a>
</li>
<?php } ?>
</ul>
</div>
Вот еще один пример свойства сетки CSS: https://www.w3schools.com/cssref/pr_grid-column.asp
Другие решения
Других решений пока нет …