全新的css网站布局--Grid布局
Grid布局全新的css网站布局
CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是实际的 grid(网格),items 是 grid(网格) 内的内容。下面是一个 wrapper 元素,内部包含6个 items :
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
要把 wrapper 元素变成一个grid(网格)
,只要简单地把其 display
属性设置为grid
即可:
.wrapper{
display:grid;
}
为了使其成为二维的网格容器,我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row
和grid-template-column
属性。
.wrapper{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:50px 50px;
}
正如你所看到的,我们为grid-template-columns
写入了 3 个值,这样我们就会得到 3 列。 我们想要得到 2 行,因此我们为 grid-template-rows
指定了2个值。
这些值决定了我们希望我们的列有多宽( 100px ),以及我们希望行数是多高( 50px ),结果如下:
<div class="wrapper">
<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>
现在,我们来创建一个 3×3 的 grid(网格):
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
将得到以下布局:
要定位和调整 items(子元素) 大小,我们将使用grid-column
和 grid-row
属性来设置:
.item1 {
grid-column-start:;
grid-column-end:;
}
我们在这里要做的是,我们希望 item1 占据从第一条网格线开始,到第四条网格线结束。换句话说,它将独立占据整行。 以下是在屏幕上显示的内容:
.item1 {
grid-column: 1 / 4;
}
为了确保你已经正确理解了这个概念,我们重新排列其他的 items(子元素) 。
.item1 {
grid-column-start:;
grid-column-end:;
}
.item3 {
grid-row-start:;
grid-row-end:;
}
.item4 {
grid-column-start:;
grid-column-end:;
}
以下是页面上的布局效果:
全新的css网站布局--Grid布局的更多相关文章
- 图文详解前端CSS中的Grid布局,你真的可以5分钟掌握
前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...
- css 中的grid布局基础
CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...
- css3 flex布局/grid布局
1.CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程) 2.CSS Grid 布局完全指南(图解 Grid 详细教程)
- 轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...
- Grid布局20行代码快速生成瀑布流
网格布局 Grid 布局,好用又简单,至少比 Flex 要人性化一点,美中不足就是浏览器支持度差点. DOM结构 中间夹层为了后续拓展. CSS .grid { display: grid; grid ...
- CSS常见的五大布局
本文概要 本文将介绍如下几种常见的布局: 一.单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略 ...
- cdispaly的Grid布局与Flex布局
cdispaly的Grid布局与Flex布局 Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 ...
- 学习WPF——WPF布局——初识布局容器
StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window x:Class="Wpf ...
- 带你入门 CSS Grid 布局
前言 三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
随机推荐
- autoreconf报错LC_ALL和LANGUAGE未设置
报错提示: merlin@ubuntu:/opt/smbshared/projects/x86test/openvpn/openvpn-release-2.4$ autoreconf -i -v -f ...
- CSS 属性单词
.container {padding:0px; height:90%; width:100%; margin:0;}#header {height:0px; width:100%; padding: ...
- Java-Runoob:Java String 类
ylbtech-Java-Runoob:Java String 类 1.返回顶部 1. Java String 类 字符串广泛应用 在Java 编程中,在 Java 中字符串属于对象,Java 提供了 ...
- [Java.Web][Servlet]常用请求头.断点续传
HTTP 请求头字段 Range Range 头指示服务器只传输一部分 Web 资源.这个头可以用来实现断点续传功能. Range 字段可以通过三种格式设置要传输的字节范围: Range bytes ...
- Python,OpenGL生命游戏
初学Python和OpenGL,练手的第一个小程序life.py,这个小程序在日后会不断调整,增加类.优化判断及操作 执行效果: 按正规生命游戏的规则: 1.周围生命等于3时产生生命 2.周围生命等于 ...
- centos7.3查看时区
[root@iZ2ze3gf6h0zndx5dxyhqiZ ~]# date -R Fri, Apr :: + 即可查看时区 我们国家的东八区(+0800) 查看clock系统配置文件 [root@i ...
- 正则表达式RE与扩展正则表达式ERE——grep与egrep
grep 正则表达式规则: ^ 行首定位符,表示从行首开始进行模式匹配 . 一个非换行符的字符 [ ] 匹配属于此集合的任意一个字符 [^ ] 匹配不属于此集合的任意一个字符 [a-z] (其指定的集 ...
- CentOS设置服务开机自动启动【转】
CentOS设置服务开机自动启动[转]Posted on 2012-06-28 16:00 eastson 阅读(4999) 评论(0) 编辑 收藏 CentOS安装好apache.mysql等服务器 ...
- Redis持久化RDB和AOF原理
前言: redis持久化方式分为两种:RDB快照和AOF方式(默认为RDB模式),当Redis服务器重启的时候,会自动恢复数据,优先从AOF中恢复,其次才从RDB中恢复 一.RDB快照模式 RDB ...
- 动态修改datagrid中的numberbox的最大值和最小值
注意datagrid使用的触发函数是: onBeginEdit,只有在这个触发条件下,editor才真正初始化完成,不然没法动态修改numberbox中的最大最小值. 示例代码:(注意这一块:onBe ...