CSS网格堆积在桌面上

Question

我已经创建了一个页面来显示网格，但是CSS网格显示为堆叠在桌面视图中。我不知道为什么会这样。这是代码：

CSS

我还添加了<div class="row">，以表明它们是同一行的一部分。我尝试将其分为4列，然后使用span指示宽度。但是他们都不是

 #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>

由于某种原因而工作。我在另一页上有一个网格，该网格使用相同的结构可以正常工作，但是此页面无法正常工作。任何指导都会有所帮助。预先感谢。

Answer 1

我删除了<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