grid课后练习 - html+css - php中文网博客

首页 > 博客列表 > grid课后练习

博主信息

博文 26

粉丝 0

访问量 21025

专题推荐

更多>

grid的基本属性

<style>
    .con{
    display:grid;
    /* 变成网格布局 */
    grid-template-columns: 10em 10em 10em;
    /* 设置几列和列宽 */
    grid-template-rows: 5em 5em;
    /* 设置网格单元与网格单元之间的轨道间隙的宽度，第一个值是行，第二个是列*/
    gap: 0.5em 1em;
    /* 要是行和列的间隙一样，可以只写一个值 */
    gap: 0.5em;
    border: 1px solid;
    padding: 0.5em;
    }
    .con>span{
    padding: 0.5em;
    background-color: aqua;
    }
</style>
<body>
<div class="con">
      <span class="item">item1</span>
      <span class="item">item2</span>
      <span class="item">item3</span>
      <span class="item">item4</span>
      <span class="item">item5</span>
      <span class="item">item6</span>
    </div>
</body>

grid的单位

<style>
    .con{
    display:grid;
    /* 中间是两边的两倍 */
    grid-template-columns: 1fr 2fr 1fr;
    /* 用百分比来实现中间是两边的两倍会超出网格，因为百分比不识别列间隙 */
    grid-template-columns: 20% 60% 20%; 
    /* 百分比可以和fr共存，计算方式是总宽度减去百分比的宽度后剩下的都给fr，写几fr都行，因为没有其他fr做比较 */
    grid-template-columns: 20% 1fr 20%;
    /* 当只有auto和百分比是时候，auto会平均分配减去20%的值 */
    grid-template-columns: auto auto 20%;
    /* 当auto fr % 在一起的时候，auto是根据内容来定宽度，剩下的都给fr，不管是几fr */
    grid-template-columns: 20% 1fr 20%;
    grid-template-rows: 5em 5em;
    gap: 0.5em 1em;
    gap: 0.5em;
    border: 1px solid;
    padding: 0.5em;
    }
    .con>span{
    padding: 0.5em;
    background-color: aqua;
    }
</style>
<body>
<div class="con">
      <span class="item">item1</span>
      <span class="item">item2</span>
      <span class="item">item3</span>
      <span class="item">item4</span>
      <span class="item">item5</span>
      <span class="item">item6</span>
    </div>
</body>

常用函数

<style>
    .con{
    display:grid;
    grid-template-columns: 10em 10em 10em;
    grid-template-rows: 5em 5em;
    /* 1.repeat()第一个值是重复的次数,第二个是重复的尺寸 */
        grid-template-columns: repeat(3, 10em);
        /* 第二个值可以写多个值，重复是重复一组 */
        /* grid-template-columns: repeat(3, 10em 2em); */
        /* 可以混合写 ，就是把括号里面的重复完后再现实后面的尺寸*/
        /* grid-template-columns: repeat(2, 1fr) 2fr; */
        /* minmax设置最大最小值，前面是最小，后面是最大，
        下面这个意思就是中间最小是20em，最大是左右的2倍 */
        grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
    gap: 0.5em 1em;
    border: 1px solid;
    padding: 0.5em;
    }
    .con>span{
    padding: 0.5em;
    background-color: aqua;
    }
</style>
<body>
<div class="con">
      <span class="item">item1</span>
      <span class="item">item2</span>
      <span class="item">item3</span>
      <span class="item">item4</span>
      <span class="item">item5</span>
      <span class="item">item6</span>
    </div>
</body>

隐试轨道

没有设置过和定义过的轨道单元叫隐试轨道，设置和定义过的叫显式轨道

<style>
    .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 5em 5em;
    border: 1px solid;
    padding: 0.5em;
    gap: 0.5rem;
    /* 新增加了三个容器，但是没有设置，它就会自动排列到自动生成的网格空间中 */
    /* 此时，多出的三个项目自动排列进去了 */
    /* 设置过的声明过的网格中的轨道叫显式轨道 */
    /* 没有声明过自动排列进去的叫隐式轨道 ，它的属性是自动的*/
    /* 都是按照行优先排列的，一行排不下就会换行，叫行优先 */
    /* 设置排列优先级 ，默认是行排列*/
    grid-auto-flow: row;
    /* 设置隐试轨道的行高，当是行优先的时候管用 */
    grid-auto-rows: 5em;
    /* 列优先 */
    grid-auto-flow: column;
    /* 设置隐试轨道的列宽，当是列优先是时候管用 */
    grid-auto-columns: 1fr;
    }
    .container > .item {
    background-color: aqua;
    padding: 0.5rem;
    }
    </style>
  <body>
    <div class="container">
      <span class="item">item1</span>
      <span class="item">item2</span>
      <span class="item">item3</span>
      <span class="item">item4</span>
      <span class="item">item5</span>
      <span class="item">item6</span>
      <span class="item">item7</span>
      <span class="item">item8</span>
      <span class="item">item9</span>
    </div>
  </body>

更改项目显示位置

 <style>
      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 5em 5em;
        border: 1px solid;
        padding: 0.5em;
        gap: 0.5rem;
        /* 设置任意一个项目所在的网格单元的区域 */
        /* grid-area: ;行起始编号/列起始编号/行结束编号/网格结束编号/ */
        grid-auto-rows: 5em;
      }
      .container > .item {
        background-color: aqua;
        padding: 0.5rem;
      }
      .container > .item:nth-of-type(5) {
        background-color: blue;
        /* 把第五个放到第一个 */
        grid-area: 1/1/2/2;
        /* 默认跨列一行一列，下面是简写 */
        grid-area: 1/1;
        /* 但是夸一行以上就不能简写了 */
        grid-area: 1/1/3/4;
        /* 通常自关心夸几行几列，并不关心结束的编号 */
        /* 下面的意思是，跨几行用span来表示，跨两行三列 */
        grid-area: 1/1 / span 2 / span 3;
      }
      .container > .item:first-of-type {
        background-color: brown;
        /* 通栏了，从起始位置跨上1行三列 */
        grid-area: 3/1 / span 1 / span 3;
        /* 因为是从起始位置开始的，可以省略 */
        grid-area: span 1 / span 3;
        /* 因为默认是跨一行，所以还可以简写 */
        grid-area: auto/ span 3;
      }
    </style>
  <body>
    <div class="container">
      <span class="item">item1</span>
      <span class="item">item2</span>
      <span class="item">item3</span>
      <span class="item">item4</span>
      <span class="item">item5</span>
      <span class="item">item6</span>
      <span class="item">item7</span>
      <span class="item">item8</span>
      <span class="item">item9</span>
    </div>
  </body>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

a链接、锚点、img图片、iframe的应用

2020-12-09 17:31:15