CSS3简单的栅格系统

最新推荐文章于 2021-11-13 14:51:45 发布
最新推荐文章于 2021-11-13 14:51:45 发布
阅读量128 收藏
点赞数
原文链接：http://www.cnblogs.com/binmengxue/p/6094752.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高仿栅格系统</title>
    <!--栅格系统-->
    <link rel="stylesheet" href="css/small-grid.css">
    <!---->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="main small-container">
        <!--一列12个-->
        <div class="small-row">
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
            <div class="col-1 have-border">A</div>                     
        </div>
        <div class="small-row">
            <div class="col-1 have-border">A</div>
            <div class="col-11 have-border">B</div>                       
        </div>
        <!--一列6个-->
        <div class="small-row">
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
            <div class="col-2 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-2 have-border">A</div>
            <div class="col-10 have-border">B</div>
        </div>
        <!--4个-->
        <div class="small-row">
            <div class="col-3 have-border">A</div>
            <div class="col-3 have-border">A</div>
            <div class="col-3 have-border">A</div>
            <div class="col-3 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-3 have-border">A</div>
            <div class="col-9 have-border">B</div>
        </div>
        <!--3个-->
         <div class="small-row">
            <div class="col-4 have-border">A</div>
            <div class="col-4 have-border">A</div>
            <div class="col-4 have-border">A</div>
        </div>
        <div class="small-row">
            <div class="col-4 have-border">A</div>
            <div class="col-8 have-border">B</div>
        </div>
        <div class="small-row">
            <div class="col-5 have-border">A</div>
            <div class="col-7 have-border">B</div>
        </div>
        <div class="small-row">
            <div class="col-6 have-border">A</div>
            <div class="col-6 have-border">B</div>
        </div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    box-sizing: border-box;
}

.small-container{
    width: 100%;
}
.small-container,.small-row{
    box-sizing: border-box;
}
.small-row::before,
.small-row::after{
    content: '';
    display: block;
    visibility: hidden;
    clear: both;
    zoom: 1;
}
[class*='col-']{
    float: left;
    padding: 1%;
}
.col-1{
    width: 8.33%;
}
.col-2{
    width: 16.66%;
}
.col-3{
    width: 25%;
}
.col-4{
    width: 33.33%;
}
.col-5{
    width: 41.66%;
}
.col-6{
    width: 50%;
}
.col-7{
    width: 58.33%;
}
.col-8{
    width: 66.66%;
}
.col-9{
    width: 75%;
}
.col-10{
    width: 83.33%;
}
.col-11{
    width: 91.66%;
}
.col-12{
    width: 100%;
}

　　

　　

转载于:https://www.cnblogs.com/binmengxue/p/6094752.html

weixin_30284355
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS栅格系统
Y_ooo的博客
02-11 1534
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。 栅格系统与FLEX弹性布局有相似之处，都是由父容器包含多个项目元素的使用。由于兼容性并不强，效率也并未得到很大提升，因此目前不太普及。 1.声明栅格系统的容器 display: grid（块） | inline-grid（行） article { display: grid; width: 300px; height: 300px; border: s
Bootstrap之栅格系统
Eason_______的博客
05-05 264
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理： 网格系统的实...
CSS 栅格系统
weixin_30650039的博客
07-12 154
CSS: .grid { margin-right: auto; margin-left: auto; } .grid-row { width: 100%; } .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-...
web前端：简单操作实现仿bootstrap栅格系统，纯css脚本实现
cevent的博客
01-19 280
1.实现效果图 2.复制bootstrap源码 根目录下：bootstrap/less/ grid.less variables.less 根目录下：bootstrap/less/mixins grid.less grid-framework.less clearfix.less 3.修改grid-framework.less中的col- 替换为：你的任意name- 4.注意clearfix{} 继承不可以在{}之前加() 5.栅格系统主css实现，个人采用Koala考拉生成 6.自定义cs
响应式栅格布局系统demo
weixin_34384915的博客
02-15 262
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev...
[css] 你有使用过哪些栅格系统？都有什么区别呢？
歌谣的博客
02-22 363
[css] 你有使用过哪些栅格系统？都有什么区别呢？ bootstrap3 float完成的栅格 bootstrap4 flex完成的栅格 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
css3 -> 多栏布局
老梁的专栏
06-01 6376
在进行多栏布局时，使用bootstrap的栅格系统可以很轻松的实现效果，其实css3本身也提供了多兰布局的功能。 比如，我们在一个section标签内填充了很多内容，同时希望内容能够显示成三列，那么可以通过如下css来实现（使用chrome浏览器）。 设置分栏的数量 section { -webkit-column-count: 3; } 根据宽度分栏 section { -w
详解CSS中的栅格系统
09-25
CSS栅格系统是前端网页设计中的一个重要概念，它通过固定的格子结构简化了响应式布局的设计。栅格系统为响应式前端设计提供了新的实现方式，它让同一个页面能根据不同的屏幕尺寸展现不同的布局形态。本文将会详细...
Bootstrap整体框架之CSS12栅格系统
11-30
以下是一个简单的示例，展示了如何使用Bootstrap的栅格系统： ```html <div class="col-lg-3">col-lg-3 <div class="col-lg-3">col-lg-3 <div class="col-lg-3">col-lg-3 <div class="col-lg-3">col-lg-3 ...
3.全局css样式之栅格系统上.wmv
05-05
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。
bootstrap网格系统_在10分钟内学习Bootstrap 4网格系统
cumian8165的博客
07-30 360
bootstrap网格系统by Elena-Cristina Conacel 由Elena-Cristina Conacel 在10分钟内学习Bootstrap 4网格系统 (Learn the Bootstrap 4 Grid System in 10 Minutes) The Bootstrap 4 Grid System is used for responsive layouts. B...
CSS3系列 12 栅格布局
weixin_43422005的博客
07-21 5844
栅格布局 基本介绍 CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。 栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。 对于栅格布局来说，它的思想实际上非常简单，将一块区域绘制成格子，然后将元素填进去即可。 作为学习者应该从下面两个角度来学习栅格布局： 怎么样画出栅格容器 怎么样将元素放进栅格容器中的某一区域 值得一提的是，现在的一些旧版浏览器对于栅格布局并没有较好的支持性，所以这项技术的应用场景其实相
css一个div中嵌套多个div_css如何实现边框长度控制功能
weixin_35135581的博客
12-25 991
很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊-点击此处，同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。数学表达式calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提...
栅格系统
桃花扇的博客
04-17 917
为了区分，下文中column表示栅格系统中实际的列，基础列 / 列数表示栅格系统分配的十二列 目录 1.栅格系统概念 2.五个默认响应层 3.使用方法 （1）基础用法 （2）等宽列 （3）col-{breakpoint}-auto （4）混合模式—栅格系统的核心 （5）对齐方式 （6）列排序 （7）列偏移 （8）间距 （9）嵌套 栅格系统在3.0和4.0版本中有区别，3...
CSS基础知识——栅格系统
weixin_45177251的博客
11-13 2534
栅格系统如何设置栅格容器如何绘制栅格固定绘制栅格结构重复绘制栅格结构自动填充与按比例划分栅格如何在栅格中放置元素根据栅格编号放置元素栅格固定命名放置元素重复栅格的命名技巧根据偏移量部署元素元素定位简写操作使用区域定位的方式栅格样式的处理栅格排布方式栅格整体对齐方式处理栅格内元素的整体控制栅格内元素的独立控制 如何设置栅格容器 把元素的display赋值 grid 或 inline-grid ，便能把元素变成容器。 <style> main { width: 200px;
如何使用CSS栅格布局创建一个简单页面布局
YITA90的专栏
10-08 6875
如何创建一个简单的布局与CSS网格布局如果你从未涉猎过印刷设计，你可能就不知道网格布局的思想起源。网格是用来定位一个页面上的设计元素的精确测量工具。这种想法经常被用来在网页上进行内容组织和统一，提升用户的视觉体验。网页设计刚起步的时候，设计和布局都是是相当简单的， 包含头部，侧边栏，内容区域和页脚。现在，随着网络的演变，网页的布局也变得更加复杂，我们也有了更多的网页设计师来摆平他们。我们经常需要大量
CSS3 - 使用弹性盒子（Flex Box）实现完美居中、栅格系统及响应式布局
热门推荐
般若
11-09 2万+
CSS3弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex ite...
栅格系统（CSS Grid System）
jianlu_blet的博客
03-26 2372
在做项目的时候，经常要做响应式布局，对于好多初学者来说，这还是一个比较困难的事，于是就会用一些CSS框架，比如说Bootstrap, Bootstrap虽然好多方面都做得相当完善，在快速开发的时候确实很有用，但是，毕竟是框架吗，肯定不能完全符合自己的功能需求，而且也会有很多的坑，还有的情况就是也许你只需要它的栅格系统，但不得不引用它的整个css文件，这其实是完全没有必要的。那么，接下来我就将创建也...
20款素质过硬的响应式CSS栅格系统
chuanping7294的博客
10-08 145
栅格系统这种东西和许多同类工具/素材一样，“系统”二字让它看起来无比高大上，而实际上大多数的栅格系统只是一系列纵横交错的细线构成。很简单？看起来确实如此。不过它之所以被冠以“系统”二字，主要还是因为这些线条所涉及的内容管理方式、梳理页面结构的功能。栅格系统的运用会促使你的网页内容逐步走向规则化...
CSS栅格系统是什么
最新发布
12-13
CSS栅格系统是一种响应式设计的布局方式，它将页面划分为若干列，通常是12列，然后将页面中的内容放置在这些列中。这种布局方式可以让页面在不同的屏幕尺寸下都能够良好地展示，并且可以方便地进行调整和扩展。在实现上，栅格系统通常使用CSS的一些基础布局组件，如盒模型、浮动、定位等，以及一些JavaScript库，如jQuery等。 下面是一个简单的CSS栅格系统的例子： ```html <div class="container"> <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div> </div> ``` 在这个例子中，我们使用了一个名为“container”的容器来包含整个栅格系统，然后在容器内部创建了一个名为“row”的行，该行被分成了三个等宽的列，每个列的宽度为容器宽度的1/3。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值