<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>grid 布局</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            .container {

                display: grid;

                grid-template-columns: 200px auto;

                grid-template-rows: 100% 100%;

            }

            .item-1 {

                background: #008000;

            }

            .item-2 {

                background: #808080;

            }

            .item-3 {

                background: gold;

            }

            .item-4 {

                background: pink;

            }

            .item-5 {

                background: yellow;

            }

            .item-6 {

                background: #FFD700;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="item item-1">1</div>

            <div class="item item-2">2</div>

            <!--<div class="item item-3">3</div>

            <div class="item item-4">4</div>

            <div class="item item-5">5</div>

            <div class="item item-6">6</div>-->

        </div>

    </body>

</html>

grid 布局一 固定宽度+自适应宽度的更多相关文章

  1. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  2. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  3. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  4. css之页面三列布局之左右两边宽度固定，中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  5. RelativeLayout中的格局，自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...

  6. CSS布局——左定宽度右自适应宽度并且等高布局

    方法一: 别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧. HTML Markup <div id="contain ...

  7. flex布局 一侧固定宽度 一侧自适应

    想实现一个类似知乎个人主页的资料显示布局 类是下面这样 其中显示图片在一个div,Name和class和button在一个div中,使用justify-content: space-between; ...

  8. css判断不同分辨率显示不同宽度布局实现自适应宽度

    一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...

  9. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

随机推荐

  1. Photoshop CC 2015

    1.Ctrl 加 + -号实现放大缩小2.Ctrl+T 自由变换3.Ctrl+D 取消选区,再选择处理完后想要选中别的区域的话要取消之前选中的区域,要不然之前的区域一直都是选中状态4.F12 将文件恢 ...

  2. 使用jsonp进行跨域请求

    使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...

  3. [libgdx游戏开发教程]使用Libgdx进行游戏开发(8)-粒子系统

    没有美工的程序员,能够依赖的还有粒子系统. 这一章我们将使用libGDX的粒子系统线性插值以及其他的方法来增加一些特效. 你也可以使用自己编辑的粒子效果,比如这个粒子文件dust:http://fil ...

  4. Django remedy a security issue refer dos attack

    Today the Django team is issuing multiple releases -- Django 1.4.8, Django 1.5.4, and Django 1.6 bet ...

  5. Problem A: 英雄无敌3（1）【dp/待补】

      Problem A: 英雄无敌3(1) Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 86  Solved: 16[Submit][Status][ ...

  6. 19、Django实战第19天：课程列表页

    从今天开始,我们将完成"公开课"课程的相关功能..... 1.把course-list.html复制到templates目录下 2.这个页面的头部.底部与之前定义的base.htm ...

  7. HashSet如何排序

    方法一: 把HashSet保存在ArrayList里,再用Collections.sort()方法比較 private void doSort(){ final HashSet<Integer& ...

  8. [BZOJ 3152] 组合子逻辑

    Link: BZOJ 3152 传送门 Solution: 喜闻乐见,gyz出的语文题,题意要看半小时 题意:使用最少的括号将序列分割,对于每个括号中的序列,设最左边的数为$num$,序列中元素个数为 ...

  9. 洛谷 - Sdchr 的邀请赛 T1 取石子

    比赛的时候都推出来了和 质因子的指数和有关,硬是没做出来QWQ,我傻死算了 但其实这是一个结论题,因为这本来就是阶梯NIM游戏的模型.阶梯NIM游戏是指,有 n+1 阶台阶(0 ~ n),每阶上都有若 ...

  10. 求同余方程x^A=B(mod m)的解个数(原根与指标)

    求方程:的解个数 分析:设,那么上述方程解的个数就与同余方程组:的解等价. 设同于方程的解分别是:,那么原方程的解的个数就是 所以现在的关键问题是求方程:的解个数. 这个方程我们需要分3类讨论: 第一 ...