CSS grid layout demo 网格布局实例

最新推荐文章于 2022-05-04 09:27:29 发布
最新推荐文章于 2022-05-04 09:27:29 发布
阅读量124 收藏
点赞数
原文链接：http://www.cnblogs.com/yuri2016/p/8260146.html
版权

直接 上代码，里面我加注释，相当的简单, 也可以去我的github上直接下载代码，顺手给个星：https://github.com/yurizhang/micro-finance-admin-system/blob/master/grid.html

 

<!DOCTYPE html>
<html>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta content=yes name=apple-mobile-web-app-capable>
<meta content=yes name=apple-touch-fullscreen>
<meta content="telephone=no,email=no" name=format-detection>

<head>
    <title>Gird示例</title>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /*表示2列*/
            grid-template-rows: 1fr 2fr 1fr 2fr;
            /*第二行的高是第一行的2倍,我们现在可以设置行高之间的关系。如果我们把前面的行高设成 1fr ，最后一个则设置为 3fr，这意味着第二行的行高是第一行的 3 倍：*/
            grid-column-gap: 1px;
            /*列之间的线*/
            grid-row-gap: 1px;
            /*行之间的线隔*/
            background-color: rgb(117, 112, 112);
        }

        @media screen and (min-width: 500px) {
            /*超过500显示三列*/
            .wrapper {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

        @media screen and (min-width: 800px) {
            /*超过800四列*/
            .wrapper {
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
        }

        .letter {
            background-color: #0069b3;
            display: flex;
            justify-content: center;
            /*flex的相差属性居中对齐*/
            align-items: center;
            /*容器里元素垂直居中*/
            padding: 20px;
            font-size: 70px;
            color: white;
            line-height: 1;
            font-family: 'hobeaux-rococeaux-background', Helvetica;
            font-weight: 200;
            cursor: pointer;
            transition: all .3s ease;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="letter">
            Aa
        </div>

        <div class="letter">
            Bb
        </div>

        <div class='letter'>
            Cc
        </div>
        <div class='letter'>
            Dd
        </div>
        <div class="letter">
            Ee
        </div>

        <div class="letter">
            Ff
        </div>

        <div class='letter'>
            Gg
        </div>
        <div class='letter'>
            Hh
        </div>
        <div class="letter">
            Ii
        </div>

        <div class="letter">
            Jj
        </div>

        <div class='letter'>
            Kk
        </div>
        <div class='letter'>
            Mm
        </div>

    </div>
</body>

</html>

效果如下：

 

<!DOCTYPE html >
< html >
< meta name= viewport content= "width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui" >
< meta content= yes name= apple-mobile-web-app-capable >
< meta content= yes name= apple-touch-fullscreen >
< meta content= "telephone=no,email=no" name= format-detection >

< head >
< title >Gird示例 </ title >
< style >
body,
html {
padding: 0;
margin: 0;
}

.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
/*表示2列*/
grid-template-rows: 1fr 2fr 1fr 2fr;
/*第二行的高是第一行的2倍,我们现在可以设置行高之间的关系。如果我们把前面的行高设成 1fr ，最后一个则设置为 3fr，这意味着第二行的行高是第一行的 3 倍：*/
grid-column-gap: 1px;
/*列之间的线*/
grid-row-gap: 1px;
/*行之间的线隔*/
background-color: rgb( 117, 112, 112);
}

@media screen and ( min-width: 500px) {
/*超过500显示三列*/
.wrapper {
grid-template-columns: 1fr 1fr 1fr;
}
}

@media screen and ( min-width: 800px) {
/*超过800四列*/
.wrapper {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

.letter {
background-color: #0069b3;
display: flex;
justify-content: center;
/*flex的相差属性居中对齐*/
align-items: center;
/*容器里元素垂直居中*/
padding: 20px;
font-size: 70px;
color: white;
line-height: 1;
font-family: 'hobeaux-rococeaux-background', Helvetica;
font-weight: 200;
cursor: pointer;
transition: all .3s ease;
}
< / style >
</ head >

< body >
< div class= "wrapper" >
< div class= "letter" >
Aa
</ div >

< div class= "letter" >
Bb
</ div >

< div class= 'letter' >
Cc
</ div >
< div class= 'letter' >
Dd
</ div >
< div class= "letter" >
Ee
</ div >

< div class= "letter" >
Ff
</ div >

< div class= 'letter' >
Gg
</ div >
< div class= 'letter' >
Hh
</ div >
< div class= "letter" >
Ii
</ div >

< div class= "letter" >
Jj
</ div >

< div class= 'letter' >
Kk
</ div >
< div class= 'letter' >
Mm
</ div >
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/yuri2016/p/8260146.html

weixin_30896763
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css grid布局demo详解
ITzhongzi的博客
03-21 1322
示例1：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
网格布局的演示代码
qq_38234015的博客
06-11 555
将十个按钮用网格布局管理器排列
grid布局-demo
XD
12-06 682
<div class="auto_fill"> <div class="auto_fill_item">1</div> <div class="auto_fill_item">2</div> <div class="auto_fill_item">3</div> <div...
网格布局管理器Demo
杨润康Bla的专栏
04-19 563
package 网格布局管理器; import java.awt.GridLayout; import javax.swing.JButton; import javax.swing.JFrame; public class GridLayoutPosition extends JFrame { public GridLayoutPosition(){   GridLayout gridlayou
basic-css-layout-demo：简单的html + css代码演示了一些布局技巧
02-17
"basic-css-layout-demo"是一个项目，旨在通过简单的代码实例来展示如何利用HTML和CSS实现基本的网页布局技巧。这个压缩包文件`basic-css-layout-demo-master`可能包含了一系列的HTML文件、CSS样式表以及可能的示例...
jQuery EasyUI Demo 官方实例
04-22
7. **布局管理**：EasyUI 的 layout 组件可以方便地创建复杂的页面布局，如面板（panel）、网格（grid）布局等。 8. **表单验证**：form 组件支持数据验证，可以设置规则进行客户端验证，提高用户体验。 9. **Ajax...
jianshu-demo:仿照简书，练练前端
04-28
1. **CSS布局**：包括盒模型（Box Model）、流体布局（Fluid Layout）、网格布局（Grid Layout）和Flexbox（弹性盒子布局），用于创建响应式和动态调整的页面结构。 2. **CSS选择器**：如类选择器、ID选择器、元素...
js代码-圣杯模式demo
07-15
总的来说，"js代码-圣杯模式demo"是一个展示如何使用JavaScript和CSS来构建可扩展、响应式的三列布局的实例。通过对`main.js`的分析和`README.txt`的阅读，开发者可以学习到如何在实际项目中实现这种复杂布局，提升...
Gridlayout 网格布局
weixin_30492601的博客
09-27 92
CSS Grid Layout擅长将页面划分为主要区域，或者在从HTML基元构建的控件的各个部分之间定义大小，位置和图层之间的关系。 与表格一样，网格布局使作者能够将元素对齐到列和行中。但是，CSS网格可能比使用表格更多或更容易布局。例如，网格容器的子元素可以自己定位，使它们实际重叠和分层，类似于CSS定位元素。 <!doctype html><html><hea...
CSS3 grid layout（网格布局）（二）
Vollerei的博客
12-30 330
让我们接着来看网格布局 四、网格轨道 我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的 行 和 列。这些属性定义了网格的轨道。一个网格轨道就是网格中 任意 两条线之间的空间。在下图中你可以看到一个高亮的轨道——网格的第一个行轨道。 这个行轨道的生成方式十分简单，我们只需要在之前例子的代码（详参我的上一篇有关网格布局的博客 grid ...
grid网格布局经典案例——纯干货，不加鸡汤
weixin_34406796的博客
04-03 1069
grid网格布局使用指南 在线demo 访问github 网格布局父元素的属性使用 grid-template-rows 定义网格布局的行; 将高度(注意:要设置height)平分三份 .container{ grid-template-rows:1fr 1fr 1fr; // } 复制代码 将高度设置为固定值 .container{ grid-template-rows...
GridLayout(网格布局)
热门推荐
Android移动开发者的专栏
05-26 5万+
前言: 作为android 4.0 后新增的一个布局,与前面介绍过的TableLayout(表格布局)其实有点大同小异; 不过新增了一些东东 ①跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式 ②容器中的组件可以跨多行也可以跨多列(相比TableLayout直接放组件,占一行相比较) 因为是android 4.0新增的,API Level 14,在这个版
CSS3 grid layout（网格布局）（五）
Vollerei的博客
01-09 700
让我们接着来看网格布局 七、有关显式网格和隐式网格 在之前例子中，我们使用 grid-template-columns 和 grid-template-rows 来构建我们的网格。根据我们对这俩个属性的设置所划分出来的区域就是 显式网格。当网格元素的数量多于由我们自己设置的列轨道和行轨道划分出的区域数量时，网格容器就会 自动生成 具有 默认宽度或者高度 的的行轨道和列轨道，这些由网格容器自动生成...
CSS Grid-Layout常用布局表示法
简乐君
11-13 1527
先来看看网格布局的几大要素： part1：网格元素 1：网格线(grid-line) 2：网格列(grid-column) 3：网格行(grid-row) 4：单元格 5：网格间距（gutter:亦叫槽） 6：网格轨道（grid-track:其实就是行或列） 7：网格区域（grid-area:多个单元格组合成的区域） 1. grid-column-star
CSS Grid布局这样玩
程序猿开发日志【学习永无止境】
04-25 1万+
自从去年年半年开始，CSS Grid布局的相关教程在互联网上就铺天盖地，可谓是声势浩大。就针对于Web布局而言，个人认为Grid布局将是Web布局的神器，它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式，而Grid最大的特色，采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。 就我个人而言，我也一直在不断的关注这个布局利器的相
CSS3 grid布局
blue_sky的博客
04-03 1879
前提：现在Grid布局基本主流的浏览器都支持， CSS3 Grid Layout是一个新的模块，这个模块主要定义一个二维网格布局系统，用来优化用户界面设计。在这个网格布局模块中，网格容器的所有子元素可以在一个灵活的或者固定的了布局网格中定位到任意槽中 一、 简要 Grid翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design应该了解grid...
CSS Grid 网格布局教程
lucky__peng的博客
05-04 2372
一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布...
CSS第九章 移动端布局-Grid网格布局
晓葉斑比
06-03 566
CSS_移动端布局Grid网格布局作用在grid容器上的CSS属性1. grid-template-columns和grid-template-rows2. grid-template-areas3. grid-template4. grid-column-gap和grid-row-gap5. grid-gap6. justify-items7. align-items8. place-items9. justify-content10. align-content11. place-content作用在g
CSS Grid布局详解与实例演示
CSS Grid布局是CSS3引入的一种二维布局系统，它允许开发者在网页设计中创建复杂的网格结构，从而更方便地控制元素的排列和对齐方式。相比传统的布局方式如float和display: inline-block，Grid布局提供了更为强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值