对齐网格列

时间：2018-07-20 16:38:48

标签： html css html5 css3 css-grid

我正在尝试创建博客模板。 section#header是使用flexbox制作的。 section.main由css grid组成。

问题出在div.most-read（我将bg更改为红色）。我期望它在div.ad下为20px（grid-gap），但是，它似乎刚好低于预期的位置。怎么了？对整体代码改进有什么想法吗？附言由于缺少文字而无法发布，因此Lorem ipsum dolor坐在amet上，可以帮助您轻松地进行精英训练。莫莱斯蒂亚（Salespe）。

请参见下面的代码：

:root {
  --light-dark: #333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}

a {
  text-decoration: none !important;
}

body {
  background-color: var(--main-bg);
}

ul {
  list-style: none;
  display: flex;
}

header {
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav a {
  font-size: 1.5em;
  color: var(--light-dark);
}

.nav li {
  padding-right: 1em;
}

.nav li:last-child {
  padding-right: 0;
}

.tags {
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}

.tags ul {
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}

.tags li {
  padding-right: 10px;
}

.tags a {
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}

.tags a:hover {
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}

#main {
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

#main>* {
  background-color: var(--section-bg);
}

.latest {
  height: 80em;
  grid-column: 1 /4;
}

.ad {
  height: 25em;
  grid-column: 4 / 5;
}

.most-read {
  height: 55em;
  grid-column: 4 / 5;
  background-color: red !important;
}
<!--Header-->
<section id="header">
  <header>
    <h1>Blog</h1>
    <ul class="nav">
      <li><a href="#">anchor</a></li>
      <li><a href="#">anchor</a></li>
      <li><a href="#">anchor</a></li>
    </ul>
  </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>

2 个答案:

答案 0 :(得分：1)

网格是按行，按列绘制的，为了使.most-read向上爬，实际上您需要.latest跨越至少2行才能在旁边包括2个元素（2行）。

您可以添加：   grid-row: 1 / span 2;或grid-row: auto / span 2;至.latest 

:root{
  --light-dark:#333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}
a{
  text-decoration: none !important;
}
body{
  background-color: var(--main-bg);
}
ul{
  list-style: none;
  display: flex;
}
header{
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav a{
  font-size: 1.5em;
  color: var(--light-dark);
}
.nav li{
    padding-right: 1em;
}
.nav li:last-child{
  padding-right: 0;
}
.tags{
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}
.tags ul{
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}
.tags li{
  padding-right: 10px;
}
.tags a{
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}
.tags a:hover{
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}
#main{
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
#main > *{
  background-color: var(--section-bg);
}
.latest{
  height: 80em;
  grid-column: 1 /4;
  grid-row: 1 / span 2;
}
.ad{
  height: 25em;
  grid-column: 4 / 5;
}
.most-read{
  height: 55em;
  grid-column: 4 / 5;
  background-color: red !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--CSS-->
  <link rel="stylesheet" href="/style.css">
  <!--Google Fonts-->
  <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <!--Header-->
  <section id="header">
    <header>
      <h1>Blog</h1>
      <ul class="nav">
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
      </ul>
    </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>
</body>
</html>

关于网格https://css-tricks.com/snippets/css/complete-guide-grid/

的简单提醒

答案 1 :(得分：0)

您忽略了CSS Grid的一大优点：可以在容器级别定义网格项的宽度和高度。您不需要在项目级别设置高度（例如使用flexbox）。

您的最高项目设置为80em。在另一列中，一项设置​​为25em，另一项设置为55em。

因此，创建一个网格，每个网格有20行5em的高度。然后设置您的网格区域。

它看起来像这样：

enter image description here

（使用Firefox overlay tool进行可视化。）

这是调整后的CSS：

#main {
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(20, 5em); /* new */
  grid-gap: 20px;
}
.latest {
  /* height: 80em; */
  grid-row: 1 / 21;      /* new */
  grid-column: 1 / 4;
}
.ad{
  /* height: 25em; */
  grid-row: 1 / 6;       /* new */
  grid-column: 4 / 5;
}
.most-read{
  /* height: 55em; */
  grid-row: 6 / 21;      /* new */
  grid-column: 4 / 5;
  background-color: red !important;
}

jsFiddle demo 

:root{
  --light-dark:#333;
  --dark: #303030;
  --grey: #ccc;
  --main-bg: #ededed;
  --section-bg: #e2e2e2;
}
*{
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}
a{
  text-decoration: none !important;
}
body{
  background-color: var(--main-bg);
}
ul{
  list-style: none;
  display: flex;
}
header{
  width: 80%;
  height: 5em;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav a{
  font-size: 1.5em;
  color: var(--light-dark);
}
.nav li{
    padding-right: 1em;
}
.nav li:last-child{
  padding-right: 0;
}
.tags{
  width: 100%;
  height: 4em;
  background-color: var(--dark);
}
.tags ul{
  width: 80%;
  height: 100%;
  background-color: var(--dark);
  margin: 0 auto;
  padding: 0;
  align-items: center;
}
.tags li{
  padding-right: 10px;
}
.tags a{
  font-size: 1.2em;
  padding: 2px 0;
  color: var(--grey);
}
.tags a:hover{
  transition: .1s;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
}
#main{
  width: 80%;
  margin: 1em auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(20, 5em); /* new */
  grid-gap: 20px;
}
#main > * {
  background-color: var(--section-bg);
}
.latest {
  /* height: 80em; */
  grid-row: 1 / 21;
  grid-column: 1 / 4;
}
.ad{
  /* height: 25em; */
  grid-row: 1 / 6;
  grid-column: 4 / 5;
}
.most-read{
  /* height: 55em; */
  grid-row: 6 / 21;
  grid-column: 4 / 5;
  background-color: red !important;
}
<section id="header">
    <header>
      <h1>Blog</h1>
      <ul class="nav">
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
      </ul>
    </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>

相关问题
最新问题