hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

【杂谈】CSS Grid网格规划是什么

2019-11-18杂谈搜奇网44°c
A+ A-
本篇文章主要给人人引见 CSS Grid规划网格规划的基础知识。

引荐参考进修:《CSS教程》

关于前端的初学者来讲,CSS Grid规划的观点能够有点生疏。实在也是异常轻易明白的。我们都晓得css是规划网页款式的,一般都要考虑到网页兼容、盒子浮动、定位等hack完成题目,而css Grid规划也就是css 网格规划,是首个专程为处置惩罚这类题目而制造出来的模块。

简朴地说,CSS Grid规划就是一个二维的基于网格的规划体系,它能够同时处置惩罚列(Columns)和行(rows),目的是转变我们基于网格设想的用户接口体式格局。

下面我们就经由过程简朴的Grid 规划例子给人人引见Grid网格规划:

Grid 规划的简朴代码示例以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid网格规划示例</title>
</head>
<style>
 .wrapper {
        display: grid;
 grid-template-rows: 100px 100px 100px;
 }
    .item1 {
        grid-column-start: 1;
 grid-column-end: 4;
 }
    .item1{

        background: #333333;

 }
</style>
<body>
<div class="wrapper">
    <div class="item1" style=" background: #745A74;">大导航</div>
    <div class="item2" style="background: #CCCC66">2</div>
    <div class="item3" style="background: #FFCFCF">3</div>
    <div class="item4" style="background: aquamarine">4</div>
    <div class="item5" style="background: chartreuse">5</div>
    <div class="item6" style="background: darkorange">6</div>
</div>
</body>
</html>

结果以下图:

上述代码中,我们给指定的容器设置display:grid属性示意最先使用Grid规划,也就是将元素定义为网格容器,并设置列(grid-template-columns)和 行(grid-template-rows)的大小,然后按grid-column和grid-row把子元素放进容器中。

主要属性引见:

grid-template-rows 属性是基于网格行的维度,定义网格线的称号和网格轨道的尺寸大小。

grid-template-columns 属性是基于网格列的维度,定义网格线的称号和网格轨道的尺寸大小。

Grid-column-start 属性指定网格项在网格列中的最先位置,要领是为其网格位置孝敬一行、一个跨度或自动。此肇端位置定义网格地区的块肇端边沿。

Grid-column-end 属性经由过程向网格安排孝敬线、跨度或无(自动)来指定网格项在网格列中的完毕位置,从而指定其网格地区的块完毕边沿。

本篇文章就是关于CSS Grid网格规划的简朴基础知识引见,具有肯定的参考价值,愿望对须要的朋侪有所协助!

以上就是CSS Grid网格规划是什么的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【杂谈】CSS Grid网格规划是什么

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/281963.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>