<!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. python与鸭子类型

    部分参考来源:作者:JasonDing  https://www.jianshu.com/p/650485b78d11##s1 首先介绍下面向对象(OOP)的三大特征: (1)面向对象程序设计有三大特 ...

  2. $_ENV 为空的原因

    php.ini里面的variables_order的值为GPCS,修改为EGPCS,然后重启wamp即可. print_r($_ENV); var_dump($_ENV); foreach ($_EN ...

  3. tomcat的环境配置

    针对java8 选择tomcat进行配置 Tomcat 环境变量配置: 下载:http://tomcat.apache.org/download-80.cgi 解压后直接copy到C盘,这是免安装版本 ...

  4. HDU 1014 Uniform Generator（最大公约数，周期循环）

    #include<iostream> #include <cstdio> #include <cstring> using namespace std; int m ...

  5. DeprecationWarning: current URL string parser is deprecated解决方法

    我最近在使用mongoDB的时候,发现了这个警告语句,纳闷了,按照官方文档的教程去连接数据库还能出错,也是醉了. 后来尝试去阅读相关资料,发现只是需要将{ useNewUrlParser: true ...

  6. java中的JDBC

    Java 是通过 JDBC 技术实现对各种数据库访问的,换句话说,JDBC 充当了 Java 应用程 序与各种不同数据库之间进行对话的媒介. JDBC 是 Java 数据库连接(Java DataBa ...

  7. 基于 Python + OpenCV 进行人脸识别，视频追踪代码全注释

    先来普及一下概念, 计算机对人脸是如何识别的呢? 或者说图像是如何识别的.主要是获取单张图片的特征值记录了特征值以后,如果下一张图片来了以后两张图片特征值进行对比,如果相似度很高那么计算机就认定这两个 ...

  8. luogu P1194 买礼物

    题目描述 又到了一年一度的明明生日了,明明想要买B样东西,巧的是,这B样东西价格都是A元. 但是,商店老板说最近有促销活动,也就是: 如果你买了第I样东西,再买第J样,那么就可以只花K[I,J]元,更 ...

  9. POJ 2559 Largest Rectangle in a Histogram（单调栈）

    [题目链接] http://poj.org/problem?id=2559 [题目大意] 给出一些宽度为1的长方形下段对其后横向排列得到的图形,现在给你他们的高度, 求里面包含的最大长方形的面积 [题 ...

  10. es 数据 导出 到 MySQL

    暂时没有找到直接 导出到 mysql 数据库的工具 或者项目 目前实现思路: 使用 elasticdump  工具 实现 从 es 数据 导出到 json 文件 ,然后 使用 脚本程序 操作 改 js ...