任务2-9(网格布局)

最新推荐文章于 2024-07-10 16:22:27 发布

weixin_46137837

最新推荐文章于 2024-07-10 16:22:27 发布

阅读量215

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_46137837/article/details/119704045

版权

文章目录

1.网格布局
2. 跨行和跨列
3. minmax函数
4. 自定义网络模板
5. 网格布局的媒体查询

1.网格布局

什么是网格布局:

是一种强大的CSS布局方案，它将网页划分成一个个网格，可以任意组合的网格（类似excel）
网格布局是CSS3的布局系统与弹性布局类似网格可以理解成是二维布局（弹性布局是一维的）可以使用align-item justify-content等属性IE11部分支持
display:grid 该元素为网格容器
grid-template-columns: 列宽
grid-template-rows: 行高
grid-gap: 间距

原始样式:
在这里插入图片描述

1.列宽

加入列宽后:
display: grid;
grid-template-columns: auto auto auto;
等价效果:
grid-template-columns: repeat(3,auto);

在这里插入图片描述

按比例分配(1:3:1):
grid-template-columns: 1fr 3fr 1fr;

在这里插入图片描述

2. 间距

加入间距后的样式:
grid-gap: 2rem;

在这里插入图片描述

3. 行高

加入行高(1:5):
grid-template-rows: 1fr 5fr;

在这里插入图片描述

2. 跨行和跨列

屬性	值
grid-column-end: 3	列到哪个结束（不包含）
grid-column: 1 / span 3	从第一根线开始，合并3个单元格
grid-row-start: 1	行从哪个开始
grid-row-end: 3	行到哪个结束（不包含）
grid-row: 1 / span 3	同上

原始样式:
在这里插入图片描述

列合并:
1. grid-column-start: 1;   
   grid-column-end:4  #合并三个(从第一根线开始,合并三个)
2. (grid-column: 1 / span 3;) # 从第一个开始,合并三个

在这里插入图片描述

行合并:
1. grid-row-start: 1; grid-row-end: 4;
2.  grid-row: 1 / span 2;

3. minmax函数

minmax(300px, 600px)
不小于300px不大于600px

grid-template-columns: repeat(auto-fit,minmax(200px,1fr));

4. 自定义网络模板

grid-template-areas:模板样式
grid-area:选择模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格模板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap {
            display: grid;
            grid-template-areas: 
            'header header header'
            'info info aside'
            'shi1 shi2 shi3'
            'footer footer footer';
            grid-gap: 1rem;
        }
        @media screen and (max-width: 768px) {
            .wrap {
                grid-template-areas: 
                'header'
                'info'
                'aside'
                'shi1' 
                'shi2' 
                'shi3'
                'footer';
            }
        }
        header, .info, article, aside, footer {
            box-shadow: 0 0 3px gray;
            padding: .4rem;
            text-align: center;
        }
        header {
            grid-area: header;
        }
        .info {
            grid-area: info;
        }
        aside {
            grid-area: aside;
        }
        .shi1 {
            grid-area: shi1;
        }
        .shi2 {
            grid-area: shi2;
        }
        .shi3 {
            grid-area: shi3;
        }
        footer {
            grid-area: footer;
        }
 
    </style>
</head>
<body>
    <div class="wrap">
        <header>
            <h1>李白</h1>
        </header>
        <div class="info">
            <h2>简介</h2>
            <p>李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。李白深受黄老列庄思想影响，有《李太白集》传世，诗作中多以醉时写的，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《明堂赋》《早发白帝城》等多首</p>
        </div>
        <aside>
            <p>选项1</p>
            <p>选项2</p>
            <p>选项3</p>
        </aside>
        <article class="shi-1">
            <h3>望庐山瀑布</h3>
            <p>日照香炉生紫烟，遥看瀑布挂前川。
飞流直下三千尺，疑是银河落九天。</p>
        </article>
        <article class="shi-2">
            <h3>赠汪伦</h3>
            <p>李白乘舟将欲行，忽闻岸上踏歌声。
桃花潭水深千尺，不及汪伦送我情。</p>
        </article>
        <article class="shi-3">
            <h3>早发白帝城</h3>
            <p>朝辞白帝彩云间，千里江陵一日还。
两岸猿声啼不住，轻舟已过万重山。</p>
        </article>
        <footer>
            <p>知了堂</p>
        </footer>
    </div>
</body>
</html>

在这里插入图片描述

5. 网格布局的媒体查询

@media screen and (min-width: 768px) and (max-width: 1200px) {
       main {
            display: grid;
            grid-template-columns: repeat(3, auto);
            grid-gap: 1rem;
        }
    }

可供参考的连接

weixin_46137837

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
任务2-9(网格布局)

文章目录1.网格布局1.列宽2. 间距3. 行高2. 跨行和跨列3. minmax函数4. 自定义网络模板5. 网格布局的媒体查询1.网格布局什么是网格布局: 是一种强大的CSS布局方案，它将网页划分成一个个网格，可以任意组合的网格（类似excel）网格布局是CSS3的布局系统与弹性布局类似网格可以理解成是二维布局（弹性布局是一维的）可以使用align-item justify-content等属性IE11部分支持display:grid 该元素为网格容器grid-template-co
复制链接

扫一扫