<!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. Selenium2+python自动化28-table定位【转载】

    前言 在web页面中经常会遇到table表格,特别是后台操作页面比较常见.本篇详细讲解table表格如何定位. 一.认识table 1.首先看下table长什么样,如下图,这种网状表格的都是table ...

  2. rtsp 学习

    1.1.   RTSP协议简介 一种应用层协议,可基于tcp或udp协议. Real Time Streaming Protocol或者RTSP(实时流媒体协议),是由Real network 和 N ...

  3. TS 数据流分析学习

    TS 流.包结构以及同步 1. TS 流: 可以将TS流理解为一种单一码流.混合码流. 单一码流:TS流的基本组成单位是长度为188字节的TS包. 混合码流:TS流有多种数据组成,一个TS包中的数据可 ...

  4. HDU 6324.Problem F. Grab The Tree-博弈(思维) (2018 Multi-University Training Contest 3 1006)

    6324.Problem F. Grab The Tree 题目看着好难,但是题解说的很简单,写出来也很简单.能想出来就是简单的,想不出来就难(讲道理,就算是1+1的题目,看不出来就是难的啊). 和后 ...

  5. php中parse_url函数的源码及分析

    前言 看师傅们的文章时发现,parse_url出现的次数较多,单纯parse_url解析漏洞的考题也有很多,在此研究一下源码(太菜了看不懂,待日后再补充Orz) 源码 PHPAPI php_url * ...

  6. UVA 12594 Naming Babies

    $dp$,斜率优化. 设$dp[j][i]$表示前$i$个位置分成$j$段的最小值,递推式很好写,预处理几个前缀和就可以了,然后斜率优化即可. #pragma comment(linker, &quo ...

  7. 【OpenStack Cinder】Cinder安装时遇到的一些坑

    最近需要安装Cinder组件,然后遇到了两个比较蛋疼的错误导致controller节点输入cinder service-list一直不能显示cinder节点上的cinder-volume服务. 错误1 ...

  8. ubuntu 进入 pycharm（社区版）

    先进入到pycharm所在的目录,然后进入bin 然后./pycharm.sh 例如,我把pycharm 放在桌面上 su ➜ xushukui cd '/home/xushukui/桌面/pycha ...

  9. 【并查集】bzoj1015 [JSOI2008]星球大战starwar

    倒着处理删点,就变成了加点,于是并查集. #include<cstdio> using namespace std; #define N 400001 int fa[N],kill[N], ...

  10. xshell与虚拟机无法连接

    遇到xshell无法连接到虚拟机的情况,我大概总结为以下几种情况: 1.宿主机或虚拟机中的防火墙阻止了xshell的访问. 关闭宿主机和虚拟机中的防火墙,linux虚拟机中的防火墙关闭为 :servi ...