整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

「CSS」 栅格化布局

「CSS」 栅格化布局

头条创作挑战赛#

本文同步本人掘金平台的文章：https://juejin.cn/post/6886367930523746312

栅格化布局帮助你更容易构建复杂的网页设计。它会将HTML元素转换为网格的容器（有行有列）。你可以在网格里面添加你想要的子元素。

grid 初始化元素为栅格化

将一个HTML元素转换为网格的容器，只需要对其设置display: grid即可。display: grid告诉我们，可以使用CSS Grid的相关属性了。

<dl class="container">
  <dd class="item1">item1</dd>
  <dd class="item2">item2</dd>
  <dd class="item3">item3</dd>
  <dd class="item4">item4</dd>
  <dd class="item5">item5</dd>
  <dd class="item6">item6</dd>
</dl>
复制代码
.container{
  display: grid;
}
复制代码

? 在CSS栅格布局中，父元素就是栅格容器（这里是class="container"的dl元素），其下的子元素为我们称为项目items

grid-template-columns 设置列数

上面我们已设定容器container为珊格化了，那么我们还得为这块圈起来的元素设置模版列数，表明列的区域。

.container{
  min-width: 200px;
  display: grid;
  grid-template-columns: 100px 100px auto;
}
复制代码

grid-template-columns的属性值100px 100px auto的意思是将区域划分为三列，第一列和第二列的宽度都为100px，第三列的宽度为自适应。

grid-template-rows 设置行数

上面我们设置了列数，那么对应的，就有行数，我们来设置下模版行数。

.container{
  min-height: 200px;
  display: grid;
  grid-template-rows: 60px auto;
}
复制代码

grid-template-rows的属性值60px auto的意思是将区域分为两行，第一行的高度固定为60px，而第二行的高度自适应。

单位的设置可以有px, auto, %, fr。这里的fr是fraction的缩写,表示某物的部分。比如下面的例子：

grid-template-rows: auto 10% 2fr 1fr，表示的意思是将栅格化的区域分为4行：第一行是根据内容自适应，第二行为区域的10%，最后剩余的区域分成三部分，2fr表示占其2/3，1fr表示占其1/3。

grid-column-grap 设置列间距

有必要对列与列之间设置间距，你可以理解为margin-left和margin-right的应用：

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-column-gap: 10px;
}
复制代码

grid-column-gap表示列之间相隔10px，对左边界区域左间隔不影响，对右边界区域右间隔不影响。

grid-row-gap 设置行间距

像上面设置列边距一样，有必要设置列与列的间距，对应的 - 你可以理解为margin-top和margin-bottom的应用：

.container{
  display: grid;
  grid-template-rows: 60px auto;
  grid-row-gap: 10px;
}
复制代码

grid-row-gap表示行之间相隔10px，对上边界区域顶部间隔不影响，对下边界区域底部间隔不影响。

grid-gap 简写

像margin一样，我们可以对margin-top, margin-right, margin-bottom, margin-left进行简写。grid-gap可以对grid-row-gap, grid-column-gap进行简写。

但是，grid-gap的值又不像margin一样可以写四个，它只有两个：

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 60px auto;
  grid-gap: 10px 20px;
}
复制代码

grid-gap: 10px 20px表示行间隔为10px，列间隔为20px。

到目前为止，我们讲的是栅格布局容器的拆分，下面我们来讲其子元素的布局。

子元素 grid-column

grid-column表示列跨度，比如:

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  .item5{
    grid-column: 1 / 3
  }
}
复制代码

grid-column上面的列跨度，表示类名为item5元素横跨第一列到第三列。

子元素 grid-row

对应的，grid-row表示行跨度，比如：

.container{
  display: grid;
  grid-template-rows: 50px 50px auto;
  .item3{
    grid-row: 2 / 4
  }
}
复制代码

grid-row上面的行跨度，表示类名为item3元素横跨第二行到第四行。

子元素 justify-self

justify-self更改元素宽度和排列的位置，有值如下：

  • stretch: 默认值，拉伸内容的宽度为预设的宽度
  • start: 宽度为内容宽度，内容在左侧展示
  • center: 宽度为内容宽度，内容在居中展示
  • end: 宽度为内容宽度，内容在右侧展示

子元素 align-self

align-self更改元素高度和排列的位置，有值如下：

  • stretch: 默认值，拉伸内容的高度为预设的高度
  • start: 宽度为内容高度，内容在上侧展示
  • center: 宽度为内容高度，内容在居中展示
  • end: 宽度为内容高度，内容在下侧展示

justify-items

我们想对所有子元素内容进行水平方向的排列，那么需要在设定的容器中使用justify-items属性，而不是一个个子元素进行设置justify-self属性。justify-items属性值同justify-self。

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-items: center;
}
复制代码

align-items

同理的，我们想对所有子元素内容进行垂直方向的排列，那么需要在设定的容器中使用align-items属性，而不是一个个子元素进行设置align-self属性。align-items属性值同align-self。

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  align-items: center;
}
复制代码

grid-template-areas

通过grid-template-areas为每个栅格单元命名。

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  grid-template-areas: 
    "header header header"
    ". content content"
    "footer footer footer";
}
复制代码

注意: ? .表示表格中的空单元格

子元素 grid-area关联预设名称

grid-template-areas已经为元素划分好了单元格并命名了，接下来可以通过grid-area在其子元素中关联上。

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  grid-template-areas: 
    "header header header"
    ". content content"
    "footer footer footer";
  .item6{
    grid-area: footer;
  }
}
复制代码

当然，我们可以仅仅使用grid-area实现上面需要grid-template-area和grid-area才能实现的效果。如下

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  .item6{
    grid-area: 3 / 1 / 4 / 4;
  }
}
复制代码

grid-area简写的语法是：

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
复制代码

使用函数repeat简化

使用grid-template-columns和grid-template-rows定义栅格的行列结构。上面我们是一个个定义的。我们也可以使用repeat()函数简化操作。

比如分为四列，第一列和第二列是100px，第三列为1fr,最后一列是2fr。

.container{
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr 2fr;
}
复制代码

函数minmax限定最小最大值

在我们布局空间有限的情况下，我们需要对布局的元素设置其最小值和最大值，通过minmax()函数可以轻松做到。

.container{
  display: grid;
  grid-template-columns: repeat(2, 100px) minmax(60px, 1fr) 2fr;
}
复制代码

上面的属性在实际的开发中已经够用。如果你还想了解其他的属性等，你可以点击下面的参考链接进行学习。grid的兼容性还是杠杆的，除了Opera Mini和Baidu Browser不支持外，其他的都支持~

更多的内容可以前往JIMMY BLOG

参考

cssgridgarden.com/

www.freecodecamp.org/learn/respo…

　检验前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，这里就由圣杯布局开始，到最流行的Bootstrap栅格布局。


圣杯布局

　　先来看看圣杯布局，这是一种三列布局，两边定宽，中间自适应的布局，案例如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>布局案例1</title>
<style type="text/css">
* {
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
}
.container{
    width:100%;
}
.container:after{
    display: table;
    content:".";
    clear:both;
}
.container .cl{
    float:left;
    border: 1px solid red;
    height: 200px;
}
.main{
    width:100%;
    padding 0 290px 0 320px;
    background-color: blue;
}
.sub{
    width: 320px;
    margin-left:-100%;
    background-color: white;
}
.extra{
    width: 290px;
  margin-left:-290px;
  background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
    <div class="cl main">
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>
</body>

圣杯布局的原理就是当子元素处于浮动状态时，设置负margin，子元素会叠盖到兄弟元素之上。　

　　那么能否用现在想要将其中蓝色区域再次划分成三个区域，相信有很多种办法。但能否通过嵌套的方式实现呢？我们可以试一下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>布局案例2</title>
<style type="text/css">
    * {
        box-sizing: border-box;
    }
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .container{
        width:100%;
    }
    .container:after{
        display: table;
        content:".";
        clear:both;
    }
    .container .cl{
        float:left;
        border: 1px solid red;
        height: 200px;
    }
    .main{
        width:100%;
        padding: 0 290px 0 320px;
        background-color: blue;
    }
    .sub{
        width: 320px;
        margin-left:-100%;
        background-color: white;
    }
    .extra{
        width: 290px;
        margin-left:-290px;
        background-color: yellow;
    }
</style>
</head>
<body>
<div class="container">
    <div class="cl main">
        <div class="container">
            <div class="cl main"></div>
            <div class="cl sub"></div>
            <div class="cl extra"></div>
        </div>
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>
</body>
</html>

可以看到蓝色区域已被划分成三个区域。这个过程是不是很像bootstrap中的栅格嵌套？诚然，利用圣杯布局我们可以实现一套简单的栅格系统，但栅格布局就是简单地嵌套出来的吗，很明显答案是否定的。栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，已成为今日出版物设计的主流风格之一。那么如何来设计栅格系统呢？我们往下看

栅格系统的原理

　　假设：Flowline的宽度为W，column的宽度为c，Gutter的宽度为g，Margin的宽度为m，栅格列数为N

　　W=c*N + g*(N-1) + 2m；g的宽度通常为m的两倍，所以：

　　W=(c+g) * N；把c+g记为C，得：

　　W=C * N;

　　大部分的栅格系统都是此公式的变体。

Bootstrap的栅格系统

　　下面我们将一起来看一下常见的栅格布局的设计和bootstrap中的设计实现。BootStrap中合理的使用栅格布局，必须将列放入row中，而row必须放入container中。container类在布局中主要有两个作用：

  1. 在不同的宽度区间内（响应式断点）提供宽度限制。当宽度变化时，采用不同的宽度。
  2. 提供一个padding，阻止内部内容触碰到浏览器边界。

　　Bootstrap中使用padding代替上文中的margin。大小为15px，如下图所示，粉红色为padding大小。

　　Row是column的容器，每个row中的column之和必须为12，不过我们可以通过嵌套的方式扩展。Row的左右margin都为-15px，用来抵消container中的padding，如下图蓝色部分所示：

　row的这种设计主要为了方便嵌套，后文中会提到。

　　Colomn是栅格系统的主角，每个column左右padding都为15px，上文中row的负margin抵消了container的padding，所以为每个column设置padding就是为了防止内容直接触碰边界，同时不同的column之间拥有30px的卡槽（Gutter）。如下图黄色部分所示：

　　现在想想上文中提到的公式：W=C * N;

　　上文提到row的负margin设计主要为了嵌套，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作为容器的column中，而不需要在放置一个container。如下图中蓝色所示，是放入column中的row的负margin区域。

　　现在将被嵌套的column放入row中，如下图所示，上层column便是起到了container的作用。

　　如此我们便看到了Bootstrap栅格系统的精妙所在。

考：https://gdal.org/download.html

裁切栅格数据是GIS中常见的操作，它允许从较大的栅格数据中提取出子区域的栅格数据。例如从全省的影像数据中提取出某一个县的影像数据。


1.命令： gdalwarp.exe -overwrite -of GTiff -cutline D:\data\boundry.shp -cl boundry -crop_to_cutline -dstnodata 255.0 D:\data\plant_distribution.tif D:\data\plant_distribution_cut.tif


2.关键参数

其中：

-cutline 参数表示裁剪矢量文件

-cl 参数表示裁剪图层名

-crop_to_cutline参数表示按边界输出

-dstnodata 参数表示NoData值


3.示例


在线咨询
上一篇：从屌丝到大神，设计师必备网址（上篇）
下一篇：JavaScript操作Canvas实现画板实例分析

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 廉江市 南雄市 尚义县 大方县 大祥区 新抚区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服