grid之经典12列栅格布局组件,经典示例-圣杯布局
标签搜索
侧边栏壁纸
博主昵称
老K博客

  • 累计撰写 420 篇文章
  • 累计收到 338 条评论
  • 今日撰写 0 篇文章
老K博客 - 一个源码和技术分享的博客
技术分享 源码分享

grid之经典12列栅格布局组件,经典示例-圣杯布局

老K博客
老K博客
2023-08-01 / 0 评论 / 34 阅读 / 正在检测是否收录...
广告

建立布局组件

建立12列栅格布局组件的好处就是，只要你想布局，可以随时利用里面的小组件，按照你自己的想法来实现布局。

2023/08/01/ss71v7

基础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>
<body>
  <div class="box">
    <!-- 2列: 6 + 6 -->
    <!-- row: grid容器 -->
    <div class="row">
      <!-- col-6就是grid项目 -->
      <div class="col-6">6</div>
      <div class="col-6">6</div>
    </div>
    <!-- 2列: 3 +9 -->
    <div class="row">
      <div class="col-3">3</div>
      <div class="col-9">9</div>
    </div>
    <!-- 3列: 2+8+2 -->
    <div class="row">
      <div class="col-2">2</div>
      <div class="col-8">8</div>
      <div class="col-2">2</div>
    </div>
  </div>
</body>
</html>...

grid-layout.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行代码就可以把这个布局给写出来。利用上面写好的组件，即可完成经典的圣杯布局。

023/08/01/stylvc

基础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>
  <!-- 栅格布局组件UI  -->
  <link rel="stylesheet" href="grid-layout.css" />
  <link rel="stylesheet" href="grid-case.css" />
</head>
<body>
  <div class="header row">
    <div class="col-12">页眉12列</div>
  </div>
  <div class="main row">
    <div class="left col-2">左侧2列</div>
    <div class="content col-8">内容区8列</div>
    <div class="right col-2">右侧2列</div>
  </div>
  <div class="footer row">
    <div class="col-12">页脚12列</div>
  </div>
</body>
</html>...

grid-case.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代码：

/* 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;
}...

图片列表实战

实战效果如下图：

2023/08/01/svvgp6

基础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>仿php.cn最新课程</title>
  <link rel="stylesheet" href="phpcn-course.css" />
</head>
<body>
  <div class="latest-courses">
    <h2>最新课程</h2>
    <div class="courses-list">
      <!-- 课程 -->
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div class="course">
        <!-- 1课程图片 -->
        <a href="">
          <img src="course.png" alt="" />
        </a>
        <!-- 2. 课程描述 -->
        <div class="desc">
          <!-- 2.1 标题 -->
          <div class="title">
            <small class="tag">中级</small>
            <a href="">php编程从入门到精通(2023最新版)</a>
          </div>
          <!-- 2.2 其它 -->
          <div class="other">
            <span>12345次学习</span>
            <span>收藏</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>...

phpcn-course.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;
}
...
本文共 709 个字数,平均阅读时长 ≈ 2分钟
广告
0

海报

正在生成.....
源码grid
注意：本站资源多为网络收集，如涉及版权问题请及时与站长联系，我们会在第一时间内删除资源。
您购买的只是资源，不提供解答疑问和安装服务。
本站用户发帖仅代表本站用户个人观点，并不代表本站赞同其观点和对其真实性负责。
本站资源大多存储在云盘，如发现链接失效，请及时与站长联系，我们会第一时间更新。
转载本网站任何内容，请按照转载方式正确书写本站原文地址
版权属于： 老K博客
本文链接： https://laokbk.cn/archives/117/
文章转载：
作品采用： 本文版权内容属于《 老K博客 》转载请标明出处
相关推荐
格创校园跑腿1.1.53分享源码加详细教程
格创校园跑腿1.1.53分享源码加详细教程
 L8201 仿某知识蝉在线学习副业项目知识付费系统小程序源码
L8201 仿某知识蝉在线学习副业项目知识付费系统小程序源码
 最新版点微同城源码34.7+全套插件+小程序前后端
最新版点微同城源码34.7+全套插件+小程序前后端
 高颜值好看的八个HTML+CSS登录页面！附源码！
高颜值好看的八个HTML+CSS登录页面！附源码！

评论 (0)

语录
取消
CC BY-NC-ND