Don’t Overthink It Grids(不要把Grid想得太难)
2014-10-09 15:02
579 查看
现存的许多网站都会使用Gird布局,可能我们并没有明确的看到它的存在,但是当你看到他们有一块“主要内容区”位于页面左边,又有一个侧边栏在页面右边,这就是一个简单的Grid(网格)布局。
当我们需要展现一个复杂的布局的时候,人们总是希望使用现有的Grid框架来实现这个目标。他们认为Grid是超级困难的,应该留给那些超级CSS书呆子才对。这种想法将会持续下去,因为现存的许多Grid框架都比较复杂。
Context 上下文
一个区域里的元素的宽度是和包含它的父元素的宽度一样的(
Columns 列
现在让我们从一个实际的且普通的需求开始吧:一个主要的内容区拥有2/3的宽度和一个侧边栏拥有1/3的宽度。我们仅仅只给着两列div适当的css class名称。
为了让它们彼此靠近,我们需要设置他们的float和宽度,可以使用以下方法同时设置两列的样式
Clearing Context 清除上下文
父元素只有浮动的子元素时,其高度将会变为0而隐藏。我们可以清楚它的上下文来修复这个问题,只需如下代码
Gutters 边框
Grid最难的部分可能是边框了。到目前为止我们用百分比的形式来设置宽度使Grid变得灵活。我们也可以使用百分比来设置边框宽度,只是会让计算变得复杂,不过我本人不喜欢这样做,我更倾向于使用像素大小设置边框。
第一步使用box-sizing:
border-box;。我喜欢对确定的事物使用这设置。
第二步将一个固定不变的边距应用到右边的所有列,除了最后一列。
以上便是边框的基本设置了,如上图效果。
Outside Gutters 外边框
需要使用为外面设置边框?我喜欢使用一个选择性加入来设置这一特性:
More Column Choices 更多列选择
超简单:
做任何你想做的。只要确保列的分数加起来是1。是的,一点点思考,但比平常更简单了。
Scss
在这里我并没有大量使用,但是整个只用使用一点SCSS/Compass就可以变得更加简洁。
Module
我喜欢使用Module来设置Grid。
Result
点击 a
demo on CodePen.打开演示
原文地址:http://css-tricks.com/dont-overthink-it-grids/
当我们需要展现一个复杂的布局的时候,人们总是希望使用现有的Grid框架来实现这个目标。他们认为Grid是超级困难的,应该留给那些超级CSS书呆子才对。这种想法将会持续下去,因为现存的许多Grid框架都比较复杂。
Context 上下文
一个区域里的元素的宽度是和包含它的父元素的宽度一样的(
width: auto;),我们可以认为它是Width 100%。Grid的封装可能不需要处理太多的语法问题,它仅仅是个普通封装,所以一个div就可以了。
<div class="grid"> <!-- 100% wide --> </div>
Columns 列
现在让我们从一个实际的且普通的需求开始吧:一个主要的内容区拥有2/3的宽度和一个侧边栏拥有1/3的宽度。我们仅仅只给着两列div适当的css class名称。
<div class="grid"> <div class="col-2-3"> Main Content </div> <div class="col-1-3"> Sidebar </div> </div>
为了让它们彼此靠近,我们需要设置他们的float和宽度,可以使用以下方法同时设置两列的样式
[class*='col-'] { float: left; }然后像这样分别赋予不同的宽度
.col-2-3 { width: 66.66%; } .col-1-3 { width: 33.33%; }以上是便是不把Grid想太难的前提了。
Clearing Context 清除上下文
父元素只有浮动的子元素时,其高度将会变为0而隐藏。我们可以清楚它的上下文来修复这个问题,只需如下代码
.grid:after { content: ""; display: table; clear: both; }
Gutters 边框
Grid最难的部分可能是边框了。到目前为止我们用百分比的形式来设置宽度使Grid变得灵活。我们也可以使用百分比来设置边框宽度,只是会让计算变得复杂,不过我本人不喜欢这样做,我更倾向于使用像素大小设置边框。
第一步使用box-sizing:
border-box;。我喜欢对确定的事物使用这设置。
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }现在我们去设置控件的宽度,不管它是否已经应用了边距和边界的设置,它都将保持这个宽度。
第二步将一个固定不变的边距应用到右边的所有列,除了最后一列。
[class*='col-'] { padding-right: 20px; } [class*='col-']:last-of-type { padding-right: 0; }
以上便是边框的基本设置了,如上图效果。
Outside Gutters 外边框
需要使用为外面设置边框?我喜欢使用一个选择性加入来设置这一特性:
<div class="grid grid-pad"> Grid with outside gutters also </div>第一步设置与父控件的左边距(也可以选择性地设置上边距和下边距)
.grid-pad { padding: 20px 0 20px 20px; }第二步回复右边距至最后一列
.grid-pad > [class*='col-']:last-of-type { padding-right: 20px; }
More Column Choices 更多列选择
超简单:
.col-1-2 { width: 50%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; }
做任何你想做的。只要确保列的分数加起来是1。是的,一点点思考,但比平常更简单了。
Scss
在这里我并没有大量使用,但是整个只用使用一点SCSS/Compass就可以变得更加简洁。
* {
@include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-2-3 { width: 66.66%; } .col-1-3 { width: 33.33%; }
.col-1-2 { width: 50%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; }
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
Module
我喜欢使用Module来设置Grid。
<div class="grid"> <div class="col-2-3"> <article class="module"> stuff </article> <article class="module"> stuff </article> </div> <div class="col-1-3"> <aside class="module"> Sidebar stuff. Sub modules? </aside> </div> </div>这样把内容分成几块会给人很好的感觉。好处是每个模块都可以有自己的边距和内容,保持文本远离Grid的边缘。
Result
点击 a
demo on CodePen.打开演示
原文地址:http://css-tricks.com/dont-overthink-it-grids/
相关文章推荐
- think it over
- Think it over……
- 好好想想Think it over
- Think it over……
- It is said that wars in the 21st century will be fought over water. Do you agree? What do you think can be done now to alleviate
- think it over
- Think it Over……好好想想……[有声]
- 最美的英文 - 第四篇 - think it over…
- 每日一句:But don't you think you can finish it?
- Think it over before you just!
- Think it over……好好想想……
- IT人必读:写给浮躁的IT同仁(请不要做浮躁的人)
- the file couldn't be opened because you don't have permission to view it
- IT人不要一直做技术
- iOS--The file “XXX.app” couldn’t be opened because you don’t have permission to view it.
- LWUIT 上实现 Grid表格
- IT人-不要一辈子靠技术生存
- IT人不要一直做技术
- IT人,不要被过去谬论影响了
- 永远不要做的事,Never forget it