您现在的位置是：主页 > news > 山东招聘网站建设/互联网营销主要学什么
山东招聘网站建设/互联网营销主要学什么
admin2025/6/12 16:33:24【news】
简介山东招聘网站建设,互联网营销主要学什么,网站开发与设计实训心得,包工头接活网站app前面我们学习了 Flexbox 布局，这种布局通过行或者列对其子元素进行布局，属于一维布局。今天我们学习一种二维布局方式 grid 布局，也称网格布局，它属于 Flexbox 布局的增强版，往往通过 grid 来布局整个页面框架…
前面我们学习了 Flexbox 布局，这种布局通过行或者列对其子元素进行布局，属于一维布局。今天我们学习一种二维布局方式 grid 布局，也称网格布局，它属于 Flexbox 布局的增强版，往往通过 grid 来布局整个页面框架，框架内部使用 Flexbox 布局。
如果在前面你有学过 Flexbox 布局，对理解 grid 这种布局有非常大的帮助。在开始之前我们先了解一些概念。一图胜千言：
容器属性
某个元素成为 gird 容器，需要通过 display: grid 来设置布局方式为 grid。
.container { display: grid;}grid-template-rows，grid-template-columns: 设置行、列的尺寸：
fr：是一个占比单位，占容器的比例；
repeat(n, size) : 重复多少次，大小是多大；
minmax(min, max) : 取值范围 >= min, <= max;
auto：根据浏览器决定大小；
.container { display: grid; grid-template-columns: 1fr 1fr 1f grid-template-columns: repeat(3, 1fr); grid-template-columns: 200px 200px 200px; grid-template-columns: repeat(3, 200px); grid-template-rows: minmax(200px, 1fr) 100px auto;}举例：
<head> <meta charset="utf-8"> <title>CSS Grid starting pointtitle> <style> body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } .container { display: grid; grid-template-columns: repeat(3, 200px); grid-template-rows: minmax(200px, 1fr) 100px auto; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); }style>head><body> <div class="container"> <div>Onediv> <div>Twodiv> <div>Threediv> <div>Fourdiv> <div>Fivediv> <div>Sixdiv> <div>Sevendiv> div>body>上面的代码显示结果为：
gap、column-gap、row-gap 设置间隔，设置列间的间隔为 10px，行间的间隔为 20px。grid-gap 为 row-gap 和 column-gap 的缩写：
.container { column-gap: 10px; row-gap: 20px;}
grid-template-areas : 设置区域，指定不同的区域显示不同的内容，可以理解为「Excel 中的合并单元格」，比如我想做下面的效果(网页的一个框架)：
做上面这张效果，在不使用 grid-template-areas 属性的时候，其实需要一个 3x2 的网格，然后分别把 header、footer 的两个单元格合并，就这么简单。
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <style> body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } .container { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 20px; } header, footer { border-radius: 5px; padding: 10px; background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); } aside { padding: 20px; border-left: 1px solid #999; } .container { display: grid; grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-columns: 3fr 1fr; grid-template-rows: 100px 300px 100px; grid-gap: 20px; } header { grid-area: header; } article { grid-area: content; } aside { grid-area: sidebar; } footer { grid-area: footer; }style>head><body> <div class="container"> <header>素燕的技术圈header> <article> <h1>文章内容h1> <p>文章列表1p> <p>文章列表2p> article> <aside> <h2>关于h2> <p>各个平台介绍p> aside> <footer>@Lefe_xfooter> div>body>html>grid-auto-flow: 容器子元素的布局顺序，默认是按照行来布局，也可以把布局方式切换成列。
justify-items: 设置单元格内容的水平位置；
align-items: 设置单元格内容的垂直位置；
place-items: 合并；
justify-content: 整个内容区域在容器里的水平位置；
align-content: 整个内容区域在容器里的垂直位置；
place-content: 合并；
.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; }项目属性
如同 flexbox 布局一样，每个 item 也可以设置属性，我们在后续的文章中介绍。想进一步深入学习 grid 布局，查看参考文章。
参考：
https://www.html.cn/archives/8510
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids
推荐阅读：
Web 和移动端需要掌握的布局方式 - Flexbox
图解前端
