zoukankan      html  css  js  c++  java
  • Grid layout

    CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

    Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

    CSS Grid Layout擅长将页面划分为主要区域,或者根据大小、位置和层定义由HTML原语构建的控件的各部分之间的关系。

    与表一样,网格布局使作者可以将元素对齐到列和行中。然而,更多的布局可能或更容易用CSS网格比他们与表。例如,网格容器的子元素可以自己定位,因此它们实际上重叠并分层,类似于CSS定位的元素。

    Basic exampleSection

    The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.

    基本实例

    下面的示例显示了一个三列的跟踪网格,其最小行数为100个像素,最大值为AUTO。项目已被放置到网格使用基于线的布局。

    HTML

    <div class="wrapper">

    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
    <div class="five">Five</div>
    <div class="six">Six</div>
    </div>

    CSS

    .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
    }
    .one {
    grid-column: 1 / 3;
    grid-row: 1;
    }
    .two {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
    }
    .three {
    grid-column: 1;
    grid-row: 2 / 5;
    }
    .four {
    grid-column: 3;
    grid-row: 3;
    }
    .five {
    grid-column: 2;
    grid-row: 4;
    }
    .six {
    grid-column: 3;
    grid-row: 4;
    }

  • 相关阅读:
    SqlHelper使用详解
    c# 分布式事务以及MSDTC
    DataGridView隔行显示不同的颜色
    C# WinForm开发系列 DataGridView
    使用SQLHelper类调用带输出、返回参数的存储过程
    MySQLHelper类使用说明
    搜索页面———心得
    侨光卡路网站的工作点滴记录
    服务地图功能的开发心得
    成功项目经理手册
  • 原文地址:https://www.cnblogs.com/yitaqiotouto/p/9857254.html
Copyright © 2011-2022 走看看