创建自己的 CSS 网格系统【转载 | 译】

栏目: CSS · 发布时间: 5年前

内容简介:此文翻译自CSS 网格已经存在很长时间了。它们通常捆绑在 Bootstrap 等框架中。我不是一个 Bootstrap 仇恨者,但如果你真正需要的只是一个网格,有时使用一个框架就“太过分”了。以下是如何从头开始制作自己的 CSS 网格。

此文翻译自 Creating Your Own CSS Grid System | Jan ,英文不好如有错误 ✖ ,请指正。

CSS 网格已经存在很长时间了。它们通常捆绑在 Bootstrap 等框架中。我不是一个 Bootstrap 仇恨者,但如果你真正需要的只是一个网格,有时使用一个框架就“太过分”了。以下是如何从头开始制作自己的 CSS 网格。

CSS 网格的元素

创建自己的 CSS 网格系统【转载 | 译】

我们可以看到,基本网格只包含几个元素:

  • Container(容器)
  • row(行)
  • Column(列)
  • Gutter(列之间的空间)

容器(Container)

创建自己的 CSS 网格系统【转载 | 译】

容器的目的是设置整个网格的宽度。容器的宽度通常为 100%,但你可能希望设置一个最大宽度。

.grid-container {
    width: 100%;
    max-width: 1200px;
}

列之间的空间(gutter)

创建自己的 CSS 网格系统【转载 | 译】

row 元素的目的是使其中的列不会溢出到其他行上。为此,我们将使用 clearfix hack 来确保行内的所有内容都保留在行内。

/* 我们的 cleafix hack  */
.row: before,
.row: after {
    content: "";
    display: table;
    clear: both;
}

列(Column)

创建自己的 CSS 网格系统【转载 | 译】

column 是网格中最复杂的部分。首先,有几种不同的方法在 CSS 中定位 column,然后有各种宽度要考虑,以及响应式设计等因素。在本教程中,我们将定义 column 并赋予它们宽度。

列定位(Column Positioning)

float, inline-block, display: table, display: flex。这些都是在 CSS 中定位 column 的不同方法。这些方法中最容易出错和最广泛使用的是“浮动”方法。如果我们的列是空的,那么我们的浮动列将堆叠在一起。为了防止这种情况,给 column 提供 1px 的最小高度并使它们浮动。

[class*='col-'] {
    float: left;
    min-height: 1px; 
}

列宽(Column Widths)

要查找一列的宽度,我们所要做的就是将总列数除以容器的宽度。在我们的例子中,容器的宽度是 100%,我们想要6 列,所以 100/6 = 16.66,所以我们的基本列宽度是 16.66%。

[class*='col-'] {
    float: left;
    min-height: 1px; 
    width: 16.66%; 
}

这当然只是一个开始。如果我们想要一个 2 列宽的部分,我们必须创建一个 2 列宽的 column。计算非常简单。

我们在使用这些列组合时唯一考虑的是,一行中的总列数最多为 6(或者总列数是多少)。

响应式系统中内边距问题

创建自己的 CSS 网格系统【转载 | 译】

在 W3C 标准盒模型条件下,在响应式系统中给宽度单位为百分比的元素设置内边距很麻烦。幸运的是,使用 border-box 模型,我们可以轻松设置内边距。

/* 在网格内的所有元素上改变盒模型 */
.grid-container *{
  box-sizing: border-box; 
}

[class*='col-'] {
  float: left;
  min-height: 1px; 
  width: 16.66%; 
  /* 设置内边距 */
  padding: 12px;
}

使用 * {box-sizing: border-box;} 在 CSS 中改变所有元素的盒模型。

基本网格准备好了

<div class="grid-container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
    </div> 
    <div class="row">
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-3"><p>col-3</p></div> 
        <div class="col-3"><p>col-3</p></div> 
    </div> 
</div>

CSS

.grid-container{
  width: 100%;
  max-width: 1200px;
}

/* cleafix hack */
.row:before,
.row:after {
  content:"";
  display: table ;
  clear:both;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  width: 16.66%;
  padding: 12px;
  background-color: #FFDCDC;
}

.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%;    }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%;   }

.outline, 
.outline *{
  outline: 1px solid #F6A1A1;
}

/* 一些额外的列内容样式 */
[class*='col-'] > p {
  background-color: #FFC2C2;
  padding: 0;
  margin: 0;
  text-align: center;
  color: white;
}

HTML

<div class="grid-container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
    </div>
    <div class="row">
        <div class="col-3"><p>col-3</p></div>
        <div class="col-3"><p>col-3</p></div>
    </div>
</div>

使我们的网格系统响应

调整我们的网格以实现移动布局非常简单。我们所要做的就是调整列的宽度。为了简单起见,我将为 800px 以下的屏幕加倍列宽。唯一需要注意的是一些例外,例如:大于 col-3 的列在视口小于 800px 时铺满。

@media all and (max-width:800px){
    .col-1{ width: 33.33%;  }
    .col-2{ width: 50%;     }
    .col-3{ width: 83.33%;  }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }

    .row .col-2:last-of-type{
        width: 100%;
    }

    .row .col-5 ~ .col-1{
        width: 100%;
    }
}

对于小于 650px 的屏幕。

@media all and (max-width:650px){
    .col-1{ width: 50%;     }
    .col-2{ width: 100%;    }
    .col-3{ width: 100%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }
}

我们现在创建了自己的响应式网格系统,而不使用框架。

<div class="grid-container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
    </div>
    <div class="row">
        <div class="col-3"><p>col-3</p></div>
        <div class="col-3"><p>col-3</p></div>
    </div>
    <div class="row">
        <div class="col-4"><p>col-4</p></div>
        <div class="col-2"><p>col-2</p></div>
    </div>
    <div class="row">
        <div class="col-5"><p>col-5</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-6"><p>col-6</p></div>
    </div>
</div>

注意:本指南只是创建自己响应式网格系统的起点。它不是一个框架,甚至不是一个完整的解决方案,我希望它能够揭开 CSS 网格的神秘面纱。

参考

【1】 Creating Your Own CSS Grid System | Jan


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

新内容创业:我这样打造爆款IP

新内容创业:我这样打造爆款IP

南立新、曲琳 / 机械工业出版社 / 2016-5-10 / 39.00

这是个内容创业爆棚的时代,在采访几十家内容创业公司,与一线最优秀的创业者独家对话之后,作者写作了这本书,其中包括对这个行业的真诚感触,以及希望沉淀下来的体系化思考。 本书共分三个部分讲述了爆红大号的内容创业模式和方法。其中第一部分,讲述了新的生产方式,即内容形态发展的现状--正在被塑造;第二部分,讲述了新的盈利探索,即从贩卖产品到贩卖内容的转变,该部分以多个案例进行佐证,内容翔实;第三部分,......一起来看看 《新内容创业:我这样打造爆款IP》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具