grid项目对齐示例并用grid模拟bootstrap/layui的12列栅格布局组件 - CSS

首页 > 博客列表 > grid项目对齐示例并用grid模拟bootstrap/layui的12列栅格布局组件

博主信息

博文 40

粉丝 0

访问量 43915

专题推荐

更多>

grid项目对齐/重构圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid项目对齐/重构圣杯布局</title>
    <style>
        /* grid项目对齐 */
        .container{
            height: 25em;
            display: grid;
            grid-template-columns: repeat(3,10em);
            grid-template-rows: repeat(2,5em);
            grid-auto-rows: 5em;
            border: 1px solid gray;
            gap: .5em;
            /* 1.设置容器中的“所有项目”在网格单元中的对齐方式
            place-item:垂直方向 水平方向;
             */
            place-items: start center;/* 垂直居上 水平居中 */
            place-items: normal center;/*垂直居上 水平居中 ,start相当于默认值，使用normal等效，也可以用auto*/
            place-items: center center;/* 垂直 水平都居中 */
            place-items: center;/*当两个值一致时，可省略一个*/
            place-items: stretch;/* 拉伸（只有取消项目的固定尺寸才可以看到效果） */
            /* /* 3.设置项目在网格容器中的对齐方式
                只有所有项目在容器中存在剩余空间时对齐才有必要且有意义
             */
                /* 3.1 将所有项目作为一个整体在容器中对齐 */
            place-content: center center;
                /* 3.2 将所有项目打散成独立个体在容器中设置对齐方式 */
            place-content: space-between;/* 两端对齐 */
            place-content: space-around;/* 分散对齐 */
        }
        .item{
            /* width: 5em;
            height: 3em; */
            border: 1px solid rgb(201, 128, 183);
            background-color: aqua;
        }
        /* 2.place-self:设置容器中某一个项目在网格单元中的对齐方式,这个属性必须用在项目上 */
        .container>.item:nth-of-type(5){
            /* background-color: blueviolet; */
            /* place-self: center center;使用规则如place-item */
        }
/*----------------------------------------------------------------------------------*/
        /* 使用命名式的网格区域来重构圣杯布局 */
        body *{
            border: 1px solid aqua;
        }
        body{
            border: 1px solid aqua;
            display: grid;
            grid-template-columns: 15em minmax(50vw ,auto) 15em;
            grid-template-rows: 3em minmax(80vh ,auto) 3em;
            gap: 0.5em;
            /* 设置命名网格区域在轨道中的显示位置 */
            grid-template-areas: 
            "header header header"
            "left main right"
            "footer footer footer";
            /* 可以简化为：
            .为占位符 */
            grid-template-areas: 
            "header header header"
            ". main ."
            "footer footer footer";
        }
        header{
            grid-area: header;
        }
        footer{
            grid-area: footer;
        }
        main{
            grid-area: main;
        }
        /* 简化写法时此2不需要写了 */
        /* main.left{
            grid-area: left;
        }
        main.right{
            grid-area: right;
        } */
    </style>
</head>
<body>
    <!-- 使用命名式的网格区域来重构圣杯布局  -->
    <header>header</header>
    <main>main</main>
    <aside class="left">left</aside>
    <aside class="right">right</aside>
    <footer>footer</footer>
<!-- ------------------------------------------------------------------------------ -->
    <!-- grid项目对齐 -->
    <!-- <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div> -->
</body>
</html>

2.grid小实例：模拟bootstrap/layui的12列栅格布局组件

2.1 HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟bootstrap/layui的12列栅格布局组件</title>
    <link rel="stylesheet" href="grid.css">
</head>
<body>
    <!-- 栅格布局分为两步
        先创建一个行，然后在行中进行列的划分
    -->
    <div class="container">
        <div class="row">
            <!-- 一等份 -->
            <span class="item col-12">
                col-12
            </span>
        </div>
        <div class="row">
            <!-- 2等份 -->
            <span class="item col-6">
                col-6
            </span>
            <span class="item col-6">
                col-6
            </span>
        </div>
        <div class="row">
            <!-- 3等份 -->
            <span class="item col-4">
                col-4
            </span>
            <span class="item col-4">
                col-4
            </span>
            <span class="item col-4">
                col-4
            </span>
        </div>
    </div>
    <!-- 一个简单的实例 -->
    <div class="container" style="margin-top: 3em;">
        <!-- 头部 -->
        <div class="row">
            <div class="item col-12 header">header</div>
        </div>
        <!-- 正文 -->
        <div class="row">
            <div class="item col-2 left">left</div>
            <div class="item col-8 main">main</div>
            <div class="item col-2 right">right</div>
        </div>
        <!-- 底部 -->
        <div class="row">
            <div class="item col-12 footer">footer</div>
        </div>
    </div>
</body>
</html>

2.2css样式表

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-content: center;
}
.container {
  min-width: 80vw;
  display: grid;
  gap: 0.5em;
}
.container > .row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  min-height: 3em;
  gap: 0.5em;
}
.container > .row > .item {
  padding: 1em;
  text-align: center;
  border: 1px solid black;
}
.col-12 {
  grid-area: auto / span 12;
}
.col-8 {
  grid-area: auto / span 8;
}
.col-6 {
  grid-area: auto / span 6;
}
.col-4 {
  grid-area: auto / span 4;
}
.col-2 {
  grid-area: auto / span 2;
}

批改老师：

天蓬老师

批改状态：合格

老师批语：图呢

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

jQuery实现文章的展开与收起的小功能

2021-03-18 14:28:49