问网格布局不起作用，php最近的帖子Wordpress

EN

    <?php get_header(); ?>
<div class="main">
  <div id="content">
    <!--    <div id="featuredPosts">-->
      <div class="item">
      </div>
      <div class="lastItem">
      </div>
    </div>-->
    <div class="grid-container">

      <?php $the_query = new WP_Query( 'posts_per_page=6' ); ?>
      <!--// Start our WP Query-->
      <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
      <!--     // Display the Post Title with Hyperlink-->
      <div class="grid-item">
        <article>
          <a href="<?php the_permalink() ?>">
            <?php the_title(); ?>
          </a>
          <!--      // Display the Post Excerpt-->
          <?php the_excerpt(__('(more…)')); ?>
          <!--      Repeat the process and reset once it hits the limit-->
        </article>
        <?php 
endwhile;
wp_reset_postdata();
?>
      </div>
    </div>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

* {
  margin: 0;
  padding: 0;
}

footer,
header,
nav,
  {
  display: block;
}

article {
  display: grid;
}

body,
html {}

#outer-wrapper {
  background-image: url(assets/Organizer2.jpg);
  min-height: 100%;
  width: 100%;
  /*  overflow: hidden;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#inner-wrapper {
  display: block;
  border: 3px solid white;
}

.main {
  background: white;
  padding: 10px;
  margin: 100px;
  /*  display: grid;*/
  border: 2px solid white;
  border-radius: 10px;
}



header {
  /*  background: url(assets/Stina%20Smeds%20-%20Developer.png);*/
  /*
    background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
*/
  /*  o-background-size: cover;*/
  /*  padding: 15%;*/
  /*  width: 100%;*/
  height: 200px;
  /*  margin: auto 0;*/
}

#header h1 {
  font-size: 70px;
  margin: auto;
  padding: 20px 0 10px 20px;
  text-shadow: -3px 3px 6px #FFF;
}

#header p {
  font-size: 30px;
  font-weight: bold;
  margin: 0 auto;
  padding: 0 0 20px 20px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: #ffe6ff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #29293d;
}

aside {
  padding: 0 20px 0 20px;
  float: right;
}

.aside-ul {
  display: inline-block;
  list-style-type: none;
  font-size: 30px;
  padding: 5px;
  border: 1px solid white;
  border-radius: 10px;
}

#content {
  padding-bottom: 20px;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
  /*  overflow: hidden;*/
  /*  margin-top: 25px;*/
  /*  display: grid;*/
  /*  text-align: center;*/
}

/*
#content ul {
  list-style-type: none;
}
*/

#content article {
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.grid-container {
  /*
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
*/
  /*  height: 200px;*/
  /*  width: 200px;*/
  /*  display: grid;*/
  /*  grid-template-columns: 1fr 1fr 1fr;*/
  /*  grid-template-rows: repeat(3, 1fr) repeat(3, 1fr);*/
  /*  grid-auto-flow: row;*/
  /*  grid: 270px 270px / repeat(4, 270px);*/
  /*  justify-content: center;*/
  /*  grid-gap: 10px;*/
  /*  padding: 10px;*/
  /*  border: 1px solid blue;*/
}

/*
.grid-item {
  border: solid 1px black;
  grid-auto-flow: column;

  grid-column: 2/3;

  grid-row: 1/3;

}
*/

.fa {
  /*  padding: 20px 20px 0 0;*/
  /*
  box-sizing: inherit;
  font-size: 70px;
*/
  color: #fea;
  text-shadow: -3px 3px 6px #79b4c2;
  width: 40px;
  text-align: center;
  text-decoration: none;

}

/* Add a hover effect if you want */

.fa:hover {
  opacity: 0.7;
}


hr {
  margin-top: 50px;
}

/*
#featuredPosts {
  margin-bottom: 30px;
  overflow: hidden;
}
*/

/*
#featuredPosts .item {
  float: left;
  margin-right: 15px;
  padding: 0 30px 30px 0;
  position: relative;
  width: 450px;
}
*/

/*
#featuredPosts .lastItem {
  margin-right: 0;
  padding-right: 0;
}
*/

/*
recentPosts {
  display: grid;
  list-style-type: none;
  float: left;
  padding: 3px;
  margin: 3px;
  border: 3px solid #eee;
}
*/

/*
#content article.postBox {
  float: left;
  margin: 0 42px 30px 0;
  padding-bottom: 5px;
  position: 4;
  text-shadow: none;
  width: 290px;
}
*/

/*
.bg {
  background-image: url(assets/body-background.jpg);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
}
*/