例：

遇到这种布局要求我们应该怎么办？

方法1：使用flex布局

    <style>

      * {

        padding: 0;

        margin: 0;

      }

      .gird_Box {

        width: 100vw;

        height: 500px;

        display: flex;

      }

      .item1 {

        background-color: pink;

        flex: 1;

      }

      .line {

        background-color: palegreen;

        width: 20px;

      }

      .item3 {

        background-color: skyblue;

        flex: 1;

      }

    </style>

  </head>

  <body>

    <div class="gird_Box">

      <div class="item1">item1</div>

      <div

还在拿flex进行布局吗？快来试试grid网格布局吧的更多相关文章

  1. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  2. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  3. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  4. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  5. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  6. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

  7. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  8. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  9. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  10. CSS3中的display:grid网格布局介绍

    1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

随机推荐

  1. appium基本使用（Android）

    一.环境搭建 详情可见:https://www.cnblogs.com/lihongtaoya/p/16971096.html 二.元素定位 详情可见:https://www.cnblogs.com/ ...

  2. 一问读懂Web3 架构

    最近看了一些Web3.0的文章,总结了一些个人的理解: Web3.0 通过区块链基础设施管理用户数据,重构用户和互联网平台之间的关系和交互,重新定义了互联网应用的架构方式和交互模式. Web 1.0 ...

  3. [超详细] [效能工具]Typora+PicGo+Github免费图床快速搭建，提升技术文档输出效率

    一.前言 在我们日常的学习和工作中,我们经常需要进行写作.尤其对于我们程序技术人员而言,工作中的技术方案文档或者接口文档等,都是经常需要用上的. 那么如果没有一个高效的工具,去帮助我们记录和创作,这将 ...

  4. ASP.NET 6.0 Core 迁移 ASP.NET Core 7.0

    2022年微软发布了.NET 7, 同时提供了详细的升级迁移方案. Migrate from ASP.NET Core 6.0 to 7.0 今天给大家简单整理.分享一篇文章. 一.首先需要升级Vis ...

  5. Java基础学习笔记-常量与变量♪(^∇^*)

    常量与变量相同点 都有作用域,跟JS差不多, 变量的作用域:一对{ }之间有效 1.局部 2.全局 2.1.属于类的量(类常量和类变量) 2.2.属于实例的量(实例常量和实例变量) • 前面都可加权限 ...

  6. angular---处于激活状态的路由加样式

  7. TCP通信的概述(上)-TCP通信的概述(下)

    TCP通信的概述(上) TCP通信的概述(下)

  8. Grafana 系列文章（六）：Grafana Explore 中的日志

    ️URL: https://grafana.com/docs/grafana/latest/explore/logs-integration/#labels-and-detected-fields D ...

  9. IDEA必备插件、阿里巴巴规范插件（代码格式化，注释模板化）的安装及使用和快捷键设置

    背景:记录下idea的配置,换电脑方便直接配置这些信息 第一步:安装必备插件如下 英文直接翻译就是插件的作用,大部分不用额外配置,Adapter for Eclipse Code Formatter是 ...

  10. 插入排序（CSP-J 2021 T2）我有新思路了，链接：https://www.cnblogs.com/wjk53233/p/16533752.html

    我有新思路了,链接:https://www.cnblogs.com/wjk53233/p/16533752.html 我有新思路了,链接:https://www.cnblogs.com/wjk5323 ...