CSS сетка складывается на рабочем столе - PullRequest
Новая
       21

CSS сетка складывается на рабочем столе

0 голосов
/ 21 декабря 2018

Я создал страницу для отображения сетки, но сетка 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>

работает по какой-то причине.У меня есть сетка на другой странице, которая работает правильно, используя ту же структуру, но эта не работает.Любое руководство будет полезно.Заранее спасибо.

1 Ответ

0 голосов
/ 21 декабря 2018

Я удалил <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

...