首页 文章

对齐网格列

提问于
浏览 次
1

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

问题出在 div.most-read （我've changed it' s bg为红色） . 我期待它在 div.ad 下是20px（网格间隙），然而，它似乎低于预期的位置 . 怎么了？总体代码改进的任何想法？附：由于缺乏文字而无法发帖，因此Lorem ipsum dolor坐下来，精神恍惚 . Molestiae，saepe .

请参阅以下代码：

: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>
html css html5 css3 css-grid

2 回答

  • 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/

    回复于
  • 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演示

    :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>
    回复于

相关问题