网格布局不起作用，php 最近的帖子 Wordpress
Grid layout not working, php recent posts Wordpress
我是 CSS 的新手，无法使我的网格布局正常工作。我怀疑这与 php WP_Query 请求有关，因为我最近的所有帖子都垂直显示在网格的一列中。
我希望它们以 3 列和 2 行的形式显示。我什么都试过了，但我的代码越来越乱..
有没有简单的方法来做到这一点？
这就是我想要的样子：
recent blog posts
我的index.php代码：
<?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(); ?>
我的css代码：
* {
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;
}
*/
提前致谢！
尝试使用：
.grid-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* only two items here because you have 2 rows */
/* auto is maximum height of item in a row */
grid-template-rows: auto auto;
}
...并且没有与网格相关的项目样式。这些项目将按照它们在 html 中的相同顺序进入单元格。我认为您不应该在那里指定其他内容。片段：
.grid-container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
}
.grid-item{
border: 1px solid black;
}
<div class="grid-container">
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros. Pellentesque massa neque, facilisis at metus eu, mollis rhoncus urna. Duis eleifend venenatis libero, rhoncus varius turpis tincidunt non.</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros. Pellentesque massa neque, facilisis at metus eu, mollis rhoncus urna. Duis eleifend venenatis libero</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros.</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros. Pellentesque massa neque, facilisis at metus eu, mollis rhoncus urna.</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros.</div>
</div>
同时检查 A Complete Guide to Grid。
我是 CSS 的新手，无法使我的网格布局正常工作。我怀疑这与 php WP_Query 请求有关，因为我最近的所有帖子都垂直显示在网格的一列中。
我希望它们以 3 列和 2 行的形式显示。我什么都试过了，但我的代码越来越乱..
有没有简单的方法来做到这一点？
这就是我想要的样子：
recent blog posts
我的index.php代码：
<?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(); ?>
我的css代码：
* {
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;
}
*/
提前致谢！
尝试使用：
.grid-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* only two items here because you have 2 rows */
/* auto is maximum height of item in a row */
grid-template-rows: auto auto;
}
...并且没有与网格相关的项目样式。这些项目将按照它们在 html 中的相同顺序进入单元格。我认为您不应该在那里指定其他内容。片段：
.grid-container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
}
.grid-item{
border: 1px solid black;
}
<div class="grid-container">
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros. Pellentesque massa neque, facilisis at metus eu, mollis rhoncus urna. Duis eleifend venenatis libero, rhoncus varius turpis tincidunt non.</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros. Pellentesque massa neque, facilisis at metus eu, mollis rhoncus urna. Duis eleifend venenatis libero</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros.</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros. Pellentesque massa neque, facilisis at metus eu, mollis rhoncus urna.</div>
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lectus rutrum, tempus nulla sed, laoreet eros.</div>
</div>
同时检查 A Complete Guide to Grid。