php中文网grid布局实战

php中文网grid布局实战

• php中文网原图：

---

• 自己写的效果：

---

• 代码：

<!-- php入门精品课程开始 -->
    <div  class="content5 flexCompatible flexVertical flexShrinkFixed">
      <div class="flexCompatible flexVertical">
      <div class="top">
        <span class="iconfont icon-daima2"></span>
        <h2>PHP入门精品课程</h2>
        <span class="iconfont icon-daima2"></span>
      </div>
      <div class="bottom ">
        <ul>
          <li><img src="images/入门精品课程.jpg" alt=""></li>
          <li>
            <a href="">
              <img src="images/t1.jpg" alt="">
              <div>
                <div>
                  <span class="span1">中级</span>
                  <span>ThinkPHP6.0极速入门</span>
                </div>
                <div><span class="span2">4W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t2.png" alt="">
              <div>
                <div>
                  <span class="span1">初级</span>
                  <span>编程学习方法分享直播</span>
                </div>
                <div><span class="span2">1W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t3.jpg" alt="">
              <div>
                <div>
                  <span class="span1">初级</span>
                  <span>2018前端入门_HTML5</span>
                </div>
                <div><span class="span2">18W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t4.jpg" alt="">
              <div>
                <div>
                  <span class="span1">中级</span>
                  <span>CSS视频教程-玉女心经</span>
                </div>
                <div><span class="span2">10W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t5.jpg" alt="">
              <div>
                <div>
                  <span class="span1">初级</span>
                  <span>JavaScript极速入门</span>
                </div>
                <div><span class="span2">18W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t6.jpg" alt="">
              <div>
                <div>
                  <span class="span1">中级</span>
                  <span>孤独九剑(6)_jQuery</span>
                </div>
                <div><span class="span2">12W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t7.jpeg" alt="">
              <div>
                <div>
                  <span class="span1">初级</span>
                  <span>30分钟学会网站布局</span>
                </div>
                <div><span class="span2">6W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t8.jpg" alt="">
              <div>
                <div>
                  <span class="span1">初级</span>
                  <span>[公益直播课]Web前端</span>
                </div>
                <div><span class="span2">5W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t9.jpg" alt="">
              <div>
                <div>
                  <span class="span1">初级</span>
                  <span>phpSyudy极速入门视频</span>
                </div>
                <div><span class="span2">40W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t10.jpg" alt="">
              <div>
                <div>
                  <span class="span1">中级</span>
                  <span>孤独九剑(4)_PHP视频</span>
                </div>
                <div><span class="span2">50W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t11.jpg" alt="">
              <div>
                <div>
                  <span class="span1">初级</span>
                  <span>php完全自学手册</span>
                </div>
                <div><span class="span2">20W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t12.jpg" alt="">
              <div>
                <div>
                  <span class="span1">初级</span>
                  <span>MySQL权威开发指南</span>
                </div>
                <div><span class="span2">2W+次播放</span></div>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/t13.jpg" alt="">
              <div>
                <div>
                  <span class="span1">中级</span>
                  <span>[公益直播课]php实战</span>
                </div>
                <div><span class="span2">3W+次播放</span></div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    </div>
    <!-- php入门精品课程结束 -->

---

• css代码：

.content5 {
  width: 1200px;
  height: 666px;
}
.content5 > div {
  width: 1200px;
  height: 646px;
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px #888888;
}
.content5 > div > .top {
  width: 1200px;
  height: 50px;
  display: grid;
  grid-template-columns: 1fr 170px 1fr;
}
.content5 > div > .top > span {
  color: RGB(95, 159, 255);
  font-weight: bold;
}
.content5 > div > .top > span:first-of-type {
  align-self: center;
  justify-self: end;
}
.content5 > div > .top > span:last-of-type {
  align-self: center;
}
.content5 > div > .top > h2 {
  font-size: 20px;
  font-family: "宋体";
  color: RGB(77, 85, 93);
  padding: 0 5px;
  align-self: center;
  justify-self: center;
}
.content5 > div > .bottom ul {
  width: 1200px;
  height: 576px;
  display: grid;
  grid-template-columns: repeat(5, 217px);/*3行5列*/
  grid-template-rows: repeat(3, 172px);
  grid-gap: 20px 19px;
  margin: 15px 0 0 19px;
}
.content5 > div > .bottom > ul > li {
  width: 217px;
  height: 172px;
  position: relative;
  box-shadow: 0 0 5px #888888;
  border-radius: 5px;
}
.content5 > div > .bottom > ul > li:first-of-type {
  width: 217px;
  height: 362px;
  grid-row: 1/3;
  border-radius: 5px;
  box-shadow: 0 0 5px #888888;
}
.content5 > div > .bottom > ul > li:first-of-type img {
  width: 217px;
  height: 362px;
  border-radius: 5px;
  box-shadow: 0 0 5px #888888;
}
.content5 > div > .bottom > ul > li img {
  width: 217px;
  height: 124px;
  border-radius: 5px 5px 0 0;
  z-index: 10;
}
.content5 > div > .bottom > ul > li > a > div {
  width: 217px;
  height: 80px;
  z-index: 99;
  background: #fff;
  position: absolute;
  top: 92px;
  border-radius: 5px;
}
.content5
  > div
  > .bottom
  > ul
  > li:not(:first-of-type)
  > a
  > div
  > div:first-of-type {
  width: 217px;
  height: 40px;
  color: RGB(87, 96, 100);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}
.content5 > div > .bottom > ul > li:not(:first-of-type) > a .span1 {
  background: RGB(147, 153, 159);
  padding: 0 2px;
  margin: 0;
  color: #fff;
  grid-column: 2/4;
  align-self: end;
  justify-self: start;
}
.content5
  > div
  > .bottom
  > ul
  > li:not(:first-of-type)
  > a
  > div
  > div:first-of-type
  > span:last-of-type {
  grid-column: 4/12;
  align-self: end;
  justify-self: start;
}
.content5
  > div
  > .bottom
  > ul:first-of-type
  > li:not(:first-of-type)
  > a
  > div
  > div:last-of-type {
  width: 217px;
  height: 40px;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}
.content5
  > div
  > .bottom
  > ul:first-of-type
  > li:not(:first-of-type)
  > a
  .span2 {
  color: RGB(147, 153, 159);
  font-size: 14px;
  grid-column: 2/8;
  align-self: center;
  justify-self: start;
}
.content5 > div > .bottom > ul > li a {
  color: RGB(87, 96, 100);
}

---

学习总结

1.grid基本概念

采用网格布局的区域，称为"容器"（container）
容器内部采用网格定位的子元素，称为"项目"（item）
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
行和列的交叉区域，称为"单元格"（cell）
划分网格的线，称为"网格线"（grid line）

2.容器属性

display: grid指定一个容器采用网格布局
grid-template-columns属性定义每一列的列宽 px / % / fr
grid-template-rows属性定义每一行的行高  px / % / fr
repeat()函数，简化重复的值,第一个参数是重复的次数，第二个参数是所要重复的值
auto-fill关键字表示自动填充
fr关键字相当于auto，系统自动计算
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，
grid-gap: <grid-row-gap> <grid-column-gap>;
grid-template-areas属性用于定义区域，一个区域由单个或多个单元格组成
如果某些区域不需要利用，则使用"点"（.）表示
grid-auto-flow属性决定容器子元素的排列顺序
默认值是row，即"先行后列"；也可以将它设成column，变成"先列后行；
row dense， 表示"先行后列"，并且尽可能紧密填满，尽量不出现空格
column dense， 表示"先列后行"，并且尽量填满空格
justify-items 属性设置单元格内容的水平位置（左中右）
align-items 属性设置单元格内容的垂直位置（上中下）
place-items 属性是align-items属性和justify-items属性的合并简写形式
place-items: <align-items> <justify-items>;
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

3.项目属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格
使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序
grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
grid-area属性指定项目放在哪一个区域
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
place-self属性是align-self属性和justify-self属性的合并简写形式
place-self: <align-self> <justify-self>;