Grid布局 - 一键布局尝试总结~


Gird布局是什么?

Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局

Gird布局 撸完后是什么样子?

进入你的第一个Grid布局

HTML 代码: box父元素,内部包含6个子元素 items

<div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
</div>

要把box变成 grid(网格),只简单地把display 属性设置为 grid 即可:

.box{
    display:grid;
}

当然现在的上图和grid没什么关系,但是请记住“她”最后的样子~~


为了使其成为二维的网格容器,我们需要定义列和行: 创建3行(columns)2列(rows)

CSS代码 ->

.box{
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 20px 20px;
}

grid-template-columns创建列;创建几列就在后面写几个值; grid-template-rows创建行;创建几行就在后面写几个值; 结果:

为了确保能正确理解这些值与网格外观之间的关系,请看一下这个例子。

CSS代码

.box{
    display: grid;
    grid-template-columns: 150px 50px 10px;
    grid-template-rows: 50px 30px;
}

请尝试理解上面的代码,思考一下以上代码会产生怎样的布局。

这是上面代码的布局的结果: 是不是非常好理解,使用起来也非常简单是不是?

深入探究推荐参考:

原文链接:segmentfault.com

上一篇:Remath: Redux 的重新设计
下一篇:如何配置透明发光的骚气 vscode —— Jinkey 原创

相关推荐

  • 高度等于动态宽度(CSS流体布局)[复制品]

    webtikiThomas Norman(https://stackoverflow.com/users/1811992/webtiki)提出了一个问题:Height equal to dynamic...

    2 年前
  • 高度灵活可定制的PC布局:头部按钮、左边栏、右边栏、状态栏

    什么是自适应布局 CabloyJS提供了一套布局管理器,实现自适应布局 关于自适应布局的概念,强烈建议先阅读以下两篇文章: 自适应布局:pc = mobile pad 自适应布局:视图尺寸 什么...

    1 个月前
  • 页面简单布局

    下面是一个简单的页面布局。注意发现页面的布局特点,注意使用居中,浮动等。 结果: image.png(/public/upload/2eebdd74298e13c7103ee3094697...

    2 个月前
  • 重温 Flex 布局

    介绍 这是关于 Flex 布局的实践,原想还水一点字数来介绍 Flex 相关属性,想想还是算了,阮一峰大佬的两篇文章推上: 1. Flex 布局教程:语法篇(http://www.ruanyi...

    1 年前
  • 采用20/80原则学习 CSS Grid 布局

    采用20 / 80原则学习和使用 Grid 布局。 介绍 本文不会覆盖Grid 布局的所有细节,而是面向那些想快速用起来并看到效果的你们。我将会向你介绍 Grid 技术的20%,学会了这些你就掌...

    2 年前
  • 谈一谈flex布局使用中碰到的一些问题

    起因 工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下。 flex三个值的含义 众所周知,flex布局所有的属性有两种:一种作用在弹...

    2 年前
  • 调整jqGrid浏览器时调整?

    Justin Ethier(https://stackoverflow.com/users/101258/justinethier)提出了一个问题:Resize jqGrid when browser...

    2 年前
  • 详解CSS的Flex布局

    本文由云社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式。通过Flex布局,可以很优雅地解决很多CSS布局的问题。

    1 年前
  • 让多个元素贴边平分布局

    怎样让多个元素贴边平分?         为什么会有这个疑问呢?首先说明一下,接触前端有一年的时间了,自认为对静态布局不在话下,果然,自负的人最容易被打脸呐,刚换了一份工作,公司对前端要求比较严格...

    2 年前
  • 让你秒懂Flex布局 | CSS

    flexdirection flexwrap flexflow justifycontent alignitems aligncontent flexdirection 属性 属性决定...

    6 个月前

官方社区

扫码加入 JavaScript 社区