Grid网格布局的项目属性及php中文网实例

项目属性

项目在单元中的对齐方式

place-items: 所有项目在网格单元中的对齐方式-垂直方向水平方向

/* 垂直-居上  水平-居中 */
place-items: start center;
/* 垂直-居中  水平-居中 */
place-items: center center;
/* 如果垂直和水平属性值一样可以简写 */
place-items: center;

plce-sele: 某一个项目在网络单元中的对齐方式

/* 设置某一项目的对齐方式,必须在项目上设置 */
 .container .item:nth-of-type(5) {
/* 垂直-居上 水平-居右 */
   place-self: start end;
}
/* 设置某一项目在单元格或网格区域中的对齐方式 */
.container .item:nth-of-type(3) {
 /* 跨越两行两列垂直居下，水平居右显示 */
   grid-area: span 2 / span 2;
   place-self: end;
 }

1.项目在网格单元中是拉伸的
2.只有项目在网络单元中存在剩余空间的时候,对齐才有必要且有意义

项目在容器中的对齐方式

将项目在网格容器中看做一个整体的对齐方式

 /* 所有项目在垂直居下，水平居右显示 */
place-content: end end;

将项目看到独立个体的对齐方式

/* 所有项目在垂直上下两端居中，水平左右两端对齐居中显示 */
place-content: space-between space-between;

php中文网案例

html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>
      <div class="logo">
        <a href="/"><img src="https://www.php.cn/static/images/logo.png" alt="" /></a>
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">视频教程</a></li>
          <li><a href="#">入门教程</a></li>
          <li><a href="#">社区问答</a></li>
          <li><a href="#">技术文章</a></li>
          <li><a href="#">资源下载</a></li>
          <li><a href="#">编程词典</a></li>
          <li><a href="#">工具下载</a></li>
          <li><a href="#">php培训</a></li>
        </ul>
      </div>
      <div class="login">
        <div class="voice">
          <img src="" alt="" />
        </div>
        <div class="user">
          <img src="https://img.php.cn/upload/avatar/000/000/001/153c595e8fe1b269ec2b40414760a424.jpg" alt="" />
        </div>
      </div>
    </header>
    <main>
        <ul class="aside-left">
          <li><a href="">php开发</a><i></i></li>
          <li><a href="">前端开发</a><i></i></li>
          <li><a href="">服务端开发</a><i></i></li>
          <li><a href="">移动开发</a><i></i></li>
          <li><a href="">数据库</a><i></i></li>
          <li><a href="">服务器运维</a><i></i></li>
          <li><a href="">在线工具箱</a><i></i></li>
          <li><a href="">常用库类</a><i></i></li>
        </ul>
        <ul class="top">
          <li><a href="">php头条</a></li>
          <li><a href="">独孤九剑</a></li>
          <li><a href="">学习路线</a></li>
          <li><a href="">在线工具</a></li>
          <li><a href="">趣味课堂</a></li>
          <li><a href="">社区问答</a></li>
          <li><a href="">课程直播</a></li>
          <li><input type="text" placeholder="输入关键词搜索" /></li>
        </ul>
      </div>
      <div class="silder">
        <a href="">
          <img src="https://img.php.cn/upload/article/000/000/001/5fb478a8e82cb116.jpg" alt="" />
        </a>
      </div>
        <ul class="show">
          <li>
            <a href="">
              <img src="https://www.php.cn/static/images/index_yunv.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="">
              <img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt="" />
            </a>
          </li>
          <li>
            <a href="">
              <img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt="" />
            </a>
          </li>
          <li>
            <a href="">
              <img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt="" />
            </a>
          </li>
        </ul>
    </main>
    <footer></footer>
  </body>
</html>

css样式表

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  color: #333;
  text-decoration: none;
  display: block;
}
img {
  width: 100%;
}
ul li {
  list-style: none;
}
body {
  background-color: #f3f5f7;
  font: 14px Helvetica Neue, Helvetica, PingFang SC, \5fae\8f6f\96c5\9ed1, Tahoma, Arial, sans-serif;
}
header {
  display: grid;
  grid-template-columns: 1fr 9fr 1fr;
  background-color: #000;
}
header .nav {
  display: grid;
}
header .logo {
  width: 8em;
}
header .nav ul {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  place-items: center;
  gap: 1em;
}
header .nav a {
  color: #fff;
}
header .login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
}
header .login .user {
  height: 2em;
  width: 2em;
  border-radius: 100%;
  overflow: hidden;
}
main {
  display: grid;
  grid-template-columns: 15em 1fr;
  grid-template-rows: 4em 1fr 8em;
  max-width: 80vw;
  margin: 0 auto;
  margin-top: 2em;
}
main .aside-left {
  grid-area: span 3;
  background-color: #2b333b;
}
main .aside-left {
  padding-left: 2em;
}
main .aside-left li {
  display: grid;
  grid-template-columns: 4fr 1fr;
  height: 64px;
  line-height: 64px;
}
.aside-left i::after {
  content: " ";
  display: inline-block;
  height: 0.6em; /*height、width控制箭头大小*/
  width: 0.6em;
  border-width: 2px 2px 0 0;
  border-color: #999;
  border-style: solid;
  -webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
  /*前面四个参数控制箭头方向 最后两个参数分别控制距离左侧的距离 距离上侧的距离*/
  transform: matrix(0.71, -0.71, -0.71, -0.71, 6, 1);
}
main .aside-left a {
  color: #999;
}
main .top {
  display: grid;
  place-items: center start;
  background-color: #fff;
  padding-left: 1em;
}
main .top {
  display: grid;
  grid-template-columns: repeat(7, 5em) 1fr;
  gap: 1em;
}
main .show {
  background-color: #fff;
}
main .show {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  place-items: center;
}
main .show img {
  border-radius: 0.5em;
}

效果截图

项目属性

项目在单元中的对齐方式

项目在容器中的对齐方式

php中文网案例

相关文章