grid之经典12列栅格布局组件,经典示例-圣杯布局-前端开发-阁主学习小站

摘要：

记录grid完成简单的经典12栅格布局，并完成经典的圣杯布局效果，同时完成一个典型的图片列表展示。

## 建立布局组件
建立12列栅格布局组件的好处就是，只要你想布局，可以随时利用里面的小组件，按照你自己的想法来实现布局。
![建立12列栅格布局组件](https://www.mainblog.cn/zb_users/upload/2023/07/202307261542361908109.png)

基础html代码：

```html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>12列栅格布局</title>
  <link rel="stylesheet" href="grid-layout.css" />
  <style>
    .box {
      width: 90%;
      outline: 1px solid;
      padding: 5px;
      margin: 0 auto;
    }

.box .row {
      height: 50px;
      margin: 5px;
    }

.box .row>* {
      outline: 1px solid;
      border-radius: 5px;
      background-color: lightcyan;
      text-align: center;
      line-height: 50px;
      font-weight: bolder;
    }
  </style>
</head>

</html>
```
grid-layout.css代码：
```css
/* 12列栅格布局组件 */
/* grid 容器 */
.row {
  /* 定义这行是gird容器,并且分成12列 */
  display: grid;
  /* 用repeat函数块数分列 */
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
}

/* 设置项目 列数合并从1到12列 */
.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  /* 从当前开始跨越6列 */
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

.col-12 {
  grid-column: span 12;
}
```

## 圣杯布局
如果使用传统flex方式或者定位来做这个布局的话，非常的麻烦，而使用grid不到10行代码就可以把这个布局给写出来。利用上面写好的组件，即可完成经典的圣杯布局。
![grid圣杯布局](https://www.mainblog.cn/zb_users/upload/2023/07/202307261548523360935.png "grid圣杯布局")

基础html代码：
```html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>(圣杯布局)用12列的栅格布局组件来完成一个3列布局</title>
  
  <link rel="stylesheet" href="grid-layout.css" />
  <link rel="stylesheet" href="grid-case.css" />
</head>

</html>
```
grid-case.css代码：
```css
body {
  width: 1000px;
  margin: 0 auto;
  /* border: 1px solid #000; */
}

.main {
  margin: 5px 0;
}

.header,
.footer {
  height: 50px;
  background-color: lightblue;
}

.main>* {
  /* border: 1px solid #000; */
  background-color: lightgreen;
  min-height: 700px;
}

.main .left,
.main .right {
  min-width: 150px;
}

.main .content {
  min-width: 500px;
}
```

grid-layout.css代码：
```css
/* 12列栅格布局组件 */
/* grid 容器 */
.row {
  /* 定义这行是gird容器,并且分成12列 */
  display: grid;
  /* 用repeat函数块数分列 */
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
}

/* 设置项目 列数合并从1到12列 */
.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  /* 从当前开始跨越6列 */
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

.col-12 {
  grid-column: span 12;
}
```

## 图片列表实战
实战效果如下图：
![](https://www.mainblog.cn/zb_users/upload/2023/07/202307261638355043481.png)

基础HTML代码：
```html
<!DOCTYPE html>
<html lang="zh-CN">

<body>
  <div class="latest-courses">
    <h2>最新课程</h2>
    <div class="courses-list">
      
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        
        <a href="">
          <img src="course.png" alt="" />
        </a>
        
        <div class="desc">
          
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
```

phpcn-course.css代码：
```css
body {
  background-color: #efefef;
}

body a {
  text-decoration: none;
  color: #555;
  font-size: small;
}

body a:hover {
  color: red;
}

.latest-courses {
  width: 1020px;
  /* border: 1px solid #000; */
  margin: 0 auto;
}

/* 课程列表: grid, 2行5列 */
.latest-courses .courses-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px 10px;
}

.latest-courses .courses-list img {
  width: 100%;
  /* 上 右 下 左 */
  border-radius: 5px 5px 0 0;
}

/* 图片鼠标放上去放大一点点 */
.latest-courses .courses-list img:hover {
  /* 变换: 放大 */
  transform: scale(1.1);
  transition: 0.3s;
}

.latest-courses .courses-list .course {
  background-color: #fff;
  border-radius: 5px;

/* 给课程加上溢出隐藏,这样的图片放大时,宽高不变化 */
  overflow: hidden;
}

/* 课程描述 */
.latest-courses .courses-list .course .desc {
  padding: 15px;
  display: grid;
  gap: 10px;
}

.latest-courses .courses-list .course .desc .tag {
  color: red;
  background-color: bisque;
  border-radius: 2px;
  padding: 2px 4px;
  font-size: x-small;
}

.latest-courses .courses-list .course .desc .other {
  color: #aaa;
  font-size: small;

display: flex;
  place-content: space-between;
}
```

本文地址：https://www.mainblog.cn/324.html
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。