12栅格化布局

最新推荐文章于 2022-12-05 20:52:57 发布
最新推荐文章于 2022-12-05 20:52:57 发布
阅读量732 收藏
点赞数
原文链接：http://www.cnblogs.com/weigaojie/p/11198279.html
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .container{
        width: 900px;
        height: 300px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .container>.row{
        width: 100%;
        height:100%;
        float: left;
        overflow: hidden;
    }


    @media screen and (min-width: 600px){
        .container{
            width: 600px;
            height: 300px;
            border:1px solid #333;
            box-sizing: border-box;
        }
        .container>.row>.col-l-1{
            width: 8.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-2{
            width: 16.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-3{
            width: 25%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-4{
            width: 33.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-5{
            width: 41.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-6{
            width: 50%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-7{
            width: 58.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-8{
            width: 66.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-9{
            width: 75%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-10{
            width: 83.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-11{
            width: 91.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-l-12{
            width: 100%;
            height: 100%;
            float: left;
        }
    }


    @media screen and (min-width: 900px){
        .container{
            width: 900px;
            height: 300px;
            border:1px solid #333;
            box-sizing: border-box;
        }
        .container>.row>.col-s-1{
            width: 8.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-2{
            width: 16.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-3{
            width: 25%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-4{
            width: 33.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-5{
            width: 41.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-6{
            width: 50%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-7{
            width: 58.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-8{
            width: 66.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-9{
            width: 75%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-10{
            width: 83.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-11{
            width: 91.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-s-12{
            width: 100%;
            height: 100%;
            float: left;
        }
    }


    @media screen and (min-width: 1200px){
        .container{
            width: 1200px;
            height: 300px;
            border:1px solid #333;
            box-sizing: border-box;
        }
        .container>.row>.col-m-1{
            width: 8.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-2{
            width: 16.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-3{
            width: 25%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-4{
            width: 33.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-5{
            width: 41.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-6{
            width: 50%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-7{
            width: 58.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-8{
            width: 66.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-9{
            width: 75%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-10{
            width: 83.3333333%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-11{
            width: 91.6666666%;
            height: 100%;
            float: left;
        }
        .container>.row>.col-m-12{
            width: 100%;
            height: 100%;
            float: left;
        }
    }


    div>[class*=col]{
        border:1px solid red;
        box-sizing: border-box;
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-m-3 col-s-4 col-l-6"></div>
        <div class="col-m-3 col-s-4 col-l-6"></div>
        <div class="col-m-3 col-s-4"></div>
        <div class="col-m-3"></div>
    </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/weigaojie/p/11198279.html

weixin_30357231
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3系列 12 栅格布局
weixin_43422005的博客
07-21 5802
栅格布局 基本介绍 CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。 栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。 对于栅格布局来说，它的思想实际上非常简单，将一块区域绘制成格子，然后将元素填进去即可。 作为学习者应该从下面两个角度来学习栅格布局： 怎么样画出栅格容器 怎么样将元素放进栅格容器中的某一区域 值得一提的是，现在的一些旧版浏览器对于栅格布局并没有较好的支持性，所以这项技术的应用场景其实相
CSS布局栅格化使用指南及实用代码分享
小畅的博客
05-14 1362
栅格布局（Grid Layout）是一种基于网格系统的布局方式，将页面划分为多个网格单元，通过对网格单元的组合和排列，实现各种复杂的页面布局。栅格布局具有良好的灵活性和可扩展性，可以帮助我们快速地实现响应式设计。列是栅格布局的基本单元，用于存放实际的内容。通过掌握栅格布局，我们可以轻松地实现各种复杂的页面布局和响应式设计。容器是栅格布局的基础，用于包裹所有的栅格元素。要实现响应式设计，我们需要根据不同的屏幕尺寸，调整列的宽度。栅格布局是一种非常实用的布局方式，可以帮助我们轻松地实现响应式设计。
CSS栅格布局（Grid）
ct5211314的博客
12-05 7401
今天写页面布局，突然想到了栅格布局，以往习惯了弹性布局，然后发现栅格布局有点香，然后就简单的整理了一下，用于学习与分享。 可以理解为将一个元素分成行列，然后可以设置对应的大小、布局、位置。 划分行列 使用 grid-template-columns 划分列数使用 grid-template-rows 划分行数假定一个需求，在一个容器内，左右列表，默认展示4列2行。（画的有点丑，哈哈哈哈）通过栅格布局进行页面的绘制。 上面代码发现，页面超出部分，高度不是25%了，那是因为容器外
浅谈栅格化布局
热门推荐
suxiaotie的博客
04-06 2万+
Bootsrtap这个框架的栅格化布局很有意思，可以做到响应式布局。一直很好奇原理，后来在参加百度前端学院时看到导师推荐的一篇自己设计栅格化布局的文章，很有意思，所以就试着翻译一下。如果有不对的地方，希望指正。   css的栅格化布局存在已久，他们经常被绑定在如bootstrap之类的框架上。虽然我不是一个讨厌bootstrap的人，但是有时候需要的仅仅是栅格化布局而不是整个框架。这里会展示如何
栅格布局（ 栅格 ）
AI-fisher的博客
07-20 1万+
文章目录一、开启栅格布局（display）——父容器二、配置行和列（grid-template-rows/grid-template-columns）——父容器三、配置行和列（grid-template）——父容器四、控制网格项的位置与大小（grid-row/grid-column）——子元素五、网格区域命名（grid-template-areas——父容器&&grid-area——子元素） 一、开启栅格布局（display）——父容器 栅格布局能将网页分成简单属性的行和列；Grid(网格)
网页栅格化工具
11-23
网页栅格化工具是网页设计领域中不可或缺的一部分，它帮助设计师和开发者创建整洁、有序且响应式的网页布局。栅格系统基于一系列预先设定的行和列，为网页内容提供了一个结构化的框架，使得内容能够根据不同的屏幕...
Layout一套响应式栅格化布局方案提供1X2x3x4x5栅格排布
08-10
栅格化布局系统是一种有效的响应式设计工具，它将网页划分为一系列可复用的单元格，这些单元格可以灵活地适应屏幕大小的变化。本文将深入探讨"Layout一套响应式栅格化布局方案提供1X2x3x4x5栅格排布"这一主题，以及...
浅谈CSS 栅格系统布局原理分析
09-27
Bootstrap是最流行的前端框架之一，它的栅格系统是基于12列的网格布局。通过创建`.row`类定义行，并在其中包含`.col-*`类的列，我们可以灵活地分配页面上的空间。例如： ```html <div class="col-md-12">col-12...
CSS栅格化工具
07-15
运用固定的格子设计版面布局，其风格工整简洁。 2.为什么是960px？ 比较直观的一种说法：苹果电脑1024 x 768 的分辨率下，Firefox窗体的大小约为 974×650。减掉左右两边7px的边框，网页的实际大小为上图中的红色...
bootstrap可视化布局系统
03-31
在Bootstrap中，可视化布局系统是构建用户界面的关键工具，它允许开发者通过直观的方式来设计和组织网页元素，从而提高开发效率并确保跨设备的兼容性。 在Bootstrap的可视化布局系统中，网格（Grid System）是最...
Bootstrap3修改版 原有的12个栅格改为24个，方便控制多元素行
11-04
Bootstrap3修改版 原有的12个栅格改为24个，方便控制多元素行
Bootstarp十二栅格系统
Hfeidz的博客
04-20 1429
Bootstarp十二栅格系统 Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 以上称之为栅格系统，通俗来讲就是把一个页面平分为十二等份所以又叫十二栅格系统。 1.十二栅格系统的布局 它的布局容器分为两种： container为固定宽度布局两边会留有固定的间距 container-fluid为自适应布局会铺满整个屏幕随着屏幕的宽度来改变
栅格布局一般怎么用_合理设置栅格化与比例 让版式布局更友好
weixin_35792271的博客
01-16 3012
合理设置栅格化与比例 让版式布局更友好十二月 31, 2015评论 (3)Sponsor本文不适合采用天才设计(Genius Design)方法的人士。有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的，越细致的地方可能越是如此。比如，这个菜单的宽度为什么是200px？250px或者190px是否可以？图片的尺寸为什么是278px*196px？如何确定网页的宽度...
栅格布局一般怎么用_设计底层原则——如何定义栅格 ？
weixin_29432863的博客
12-06 1564
我们期望此篇文章可以和大家共同探讨学习关于栅格的底层设计原则，希望能够给到大家启发，也欢迎大家一起互相交流学习。 1 栅格是什么？为什么要定义栅格？栅格其实就是我们常规理解的网格，从基础的作文本，再到围棋棋盘，都有栅格的身影。为什么设计师需要关注栅格呢？通过栅格中的网格系统，可以有效的将内容组织起来，形成内容布局的规律性，更易识别。栅格于设计师的价值主要体现在以下2方面：1.To用户：提...
简单了解十二栅格
04-12 757
　　十二栅格是一种响应式布局方式，它的大体思想是，将父元素的宽度等性的分成12栏，利用 @media 去给每一个元素在不同屏幕下设置为占据不同栏数宽度，例如，某个元素，在大屏是占整个父元素的3栏（一行有4个相同元素），在中屏占整个父元素的6栏（一行有2个相同元素），在小屏占整个父元素的12栏（独占一行）。 下面是我模仿bootstrap自己写的一个简易十二栅格系统： ...
html栅栏布局,bootstrap12栅格布局
weixin_39894932的博客
06-18 469
bootstrap栅格布局列高怎么设置bootstrap栅格占多行栅格系统只占列，和行无关。 按你上图，就是第一次分成2列，第二列放地图 一、第一列里面含三个大DIV各占一行 1.1第一行分成3列(放数值) 1.2第二行分成2列(放数值) 1.3第二行分成2列(放图表)bootstrap栅格布局怎么消除边距简介Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口(vi...
[转]网页栅格系统研究（2）：蛋糕的切法
weixin_33901843的博客
08-20 289
[出自]http://lifesinger.org/blog/2008/10/grid-system-2/ 首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页...
swing 学习笔记十二（网格布局GridLayout）
retacn_yue的专栏
09-09 138
/** * 网格布局 * * @time 3:22:44 PM * @author retacn yue * @Email zhenhuayue@sina.com */ @SuppressWarnings("unused") public class Test_GridLayoutDemo extends Frame {private static final long seria...
html -- 栅格系统
sanjiaowuhuan的博客
09-23 3489
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css...
栅格化布局 垂直居中
最新发布
04-05
栅格化布局是一种常用的网页布局方式，它将页面划分为等宽的列和行，通过将内容放置在这些列和行中来实现布局。而垂直居中是指将元素在垂直方向上居中对齐。 在栅格化布局中，可以使用以下方法实现垂直居中： 1. 使用flexbox布局：通过设置容器的display属性为flex，并使用align-items属性设置为center，可以实现容器内元素的垂直居中。 2. 使用表格布局：将容器的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性设置为middle，可以实现元素的垂直居中。 3. 使用绝对定位：将容器的position属性设置为relative，将子元素的position属性设置为absolute，并使用top和transform属性来调整元素的位置，可以实现元素的垂直居中。 4. 使用grid布局：通过设置容器的display属性为grid，并使用align-items属性设置为center，可以实现容器内元素的垂直居中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值