技术学习分享_CKX技术 技术资讯 #yyds干货盘点# 前端歌谣的刷题之路-第一百四十题-flex-grid

#yyds干货盘点# 前端歌谣的刷题之路-第一百四十题-flex-grid

广告位

 前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣

题目

 Grid,即网格布局。它将页面划分为一个个网格,可以任意组合不同的形态,做出理想的布局效果。Grid布局与Flexbox布局的区别在于,Flexbox是根据轴线对弹性项进行排列,而Grid布局是将容器划分为行和列,产生单元格,然后再对单元格进行操作。
 采用网格布局的区域称为容器。容器内部采用网格定位的每个子元素称为容器项,也是单元格。划分网格的线称为网格线,比如,3×3的网格有4条水平网格线和4条垂直网格线。
 现在给section盒子设置”display: grid”属性,将该盒子变成一个容器。现在需要通过给该容器划分行和列来生成单元格,给容器设置”grid-template-rows: 100px”和”grid-template-columns: repeat(2, 1fr)”两条属性以生成一个Nx2的网格,且每个容器项的宽度比为1:1、第一行的高度为100px(注意:实际上行高度可以不用设置,会根据每个容器项自动撑开,但如果设置了,就要考虑清除需要多少行,当前的行值100px仅为第一行,如果需要前三行都为100px,需要设置为”grid-template-rows: 100px 100px 100px”)。repeat方法可以简化属性值的书写,为了方便表示比例关系,网格布局提供了fr关键字,该关键字和flex-grow颇为相似。实际上如果想固定大小,完全可以将单位全部设置为固定的px值。现在继续给容器添加”grid-gap: 10px”属性,该属性为”grid-row-gap”和”grid-column-gap”两个属性的简写,分别代表行间距和列间距。
 进入下一节的学习吧。

#yyds干货盘点# 前端歌谣的刷题之路-第一百四十题-flex-grid

#yyds干货盘点# 前端歌谣的刷题之路-第一百四十题-flex-grid

​编辑

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid</title>

</head>
<style type="text/css">margin: 0;
padding: 0;
box-sizing: border-box;
}

section {
width: 500px;
text-align: center;
display: grid;
/*可选设置,设置第一行的高度为100px*/
/*如果需要前三行都为100px,需要设置为"grid-template-rows: 100px 100px 100px")*/
grid-template-rows: 100px;
/*生成一个Nx2的网格,且每个容器项的宽度比为1:1*/
/*1fr指一个单元占比,也可以写固定值则固定单元格宽度*/
grid-template-columns: repeat(2, 1fr);
/*"为grid-row-gap"和"grid-column-gap",分别代表行间距和列间距*/
grid-gap: 10px 0px;
}

article {
height: 100px;
border: 1px</style>

<body>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
<article>8</article>
<article>9</article>
</section>
</body>

</html>

#yyds干货盘点# 前端歌谣的刷题之路-第一百四十题-flex-grid

本文来自网络,不代表技术学习分享_CKX技术立场,转载请注明出处。

作者: CKX技术

上一篇
下一篇
广告位

发表回复

返回顶部