Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup.

Notes:

  • column-width operates like min-width, not width. The browser will render as many columns as it can with the width provided. If each column can take up more than the value provided, they will do so.
  • column-span enables a specific element to ignore column-count and column-width. It can be set to an integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could be to move the element (say, a heading) outside of the container with the columns applied to it. That way, it remains outside of the automatic column flow.
  • column-fill allows you to change the way content flows into columns. By default, it's set to "balance", where content is distributed as much as possible between columns. It can also be set to "auto", but in order to do so, it requires setting a fixed height. This breaks the idea of fluid, responsive layouts, so use it with caution. You'll also need some browser prefixes, so be sure to reference thisbrowser support chart.
<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <section>

    <h class="title">News</div>

    <nav>

      <ul>

        <li><a href="#">World</a></li>

        <li><a href="#">U.S.</a></li>

        <li><a href="#">Politics</a></li>

        <li><a href="#">Business</a></li>

        <li><a href="#">Sports</a></li>

        <li><a href="#">Health</a></li>

        <li><a href="#">Tech</a></li>

        <li><a href="#">Science</a></li>

        <li><a href="#">Education</a></li>

        <li><a href="#">Books</a></li>

        <li><a href="#">Food</a></li>

        <li><a href="#">Movies</a></li>

        <li><a href="#">TV</a></li>

        <li><a href="#">Automobiles</a></li>

        <li><a href="#">Real Estate</a></li>

        <li><a href="#">Jobs</a></li>

        <li><a href="#">Art & Design</a></li>

        <li><a href="#">Travel</a></li>

        <li><a href="#">Subscribe</a></li>

        <li><a href="#">Archives</a></li>

      </ul>

    </nav>

  </section>

</body>

</html>
/* Demo only styles */

* {

  box-sizing: border-box;

}

body {

  background: #eee;

  font-family: 'Karla', sans-serif;

  font-size: 18px;

  font-weight: bold;

}

section {

  padding: 0 2rem;

  margin: 0 auto;

}

ul {

  list-style: none;

  padding:;

  margin:;

}

li {

  padding: 0.5rem 0;

}

a {

  padding: 2px 5px;

  border-radius: 3px;

  color: #1A4390;

}

a:hover {

  text-decoration: none;

  background-color: #1A3490;

  color: #FFF;

}

nav{

  columns: 3 150px;

  column-gap: 3rem;

  column-rule: 1px dashed #ccc;

  column-fill: balance;

}

.title{

  column-span: all;

}

[CSS] Introduction to CSS Columns的更多相关文章

  1. 网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容如下：

    页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo      ...

  2. CSS技巧----DIV+CSS规范命名大全集合

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  3. 前端开发人员要注意的css规范，css命名。

    刚工作的时候也没注意关于css的规则,根据自己的心情想怎么用就怎么用,完成工作就好不会考虑代码的可读性,加载的性能,现在身为前端的一员就要有程序员的自我修养(嘿嘿,是不是很有责任感啊). 废话不多说, ...

  4. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  5. CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  6. Html 之div+css布局之css基础

    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...

  7. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  8. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  9. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

随机推荐

  1. Steam即将正式加入人民币支付（转）

    Valve将在2015年Q4和2016年Q1加入一批新的货币结算支持,其中包括了人民币,这意味着以后玩家将无需在跳转支付平台后并通过美元结算.这对中国玩家来说是喜是忧? 本文由爱玩网整理报道,转载请保 ...

  2. mybatis系列-15-查询缓存

    15.1     什么是查询缓存 mybatis提供查询缓存,用于减轻数据压力,提高数据库性能. mybaits提供一级缓存,和二级缓存. 一级缓存是SqlSession级别的缓存.在操作数据库时需要 ...

  3. RPC进阶篇

    RPC实现结构拆解 RPC过程调用详解:RPC 服务端通过 RpcServer 去导出(export)远程接口方法,而客户端通过 RpcClient 去引入(import)远程接口方法. 客户端像调用 ...

  4. Numpy矩阵取列向量

    >>> A=matrix("1 2;3 4") >>> A matrix([[1, 2], [3, 4]]) >>> A[:, ...

  5. 通过AopTestUtils对切面对象进行mock

    概述   当对一个切面类进行测试时,由于Spring对切面对象生成了proxy对象,此时对切面对象使用ReflectionTestUtils赋值,操作的是proxy对象,而不是真实对象,会使得赋值出问 ...

  6. openstack kilo 流量

  7. LINQ标准查询操作符（五）

    十二.相等操作符 如果两个序列的对应元素相等且这两个序列具有相同数量的元素,则视这两个序列相等. SequenceEqual方法通过并行地枚举两个数据源并比较相应元素来判断两个序列是否相等.如果两个序 ...

  8. 2016 ACM/ICPC 沈阳站 小结

    铜铜铜…… 人呐真奇怪 铁牌水平总想着运气好拿个铜 铜牌水平总想着运气好拿个银 估计银牌的聚聚们一定也不满意 想拿个金吧 这次比赛挺不爽的 AB两道SB题,十分钟基本全场都过了 不知道出这种题有什么意 ...

  9. 【转】Mysql进程管理

    mysql> show processlist; +----+------+-----------+------+---------+------+-------+--------------- ...

  10. Uber新功能：隐藏司机乘客们的手机号码

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...