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;
    }

  • 相关阅读:
    mybatis generator插件开发
    webserver实现
    Linux的selinux
    oracle从备份归档日志的方法集中回收
    百度地图 Android SDK
    Oracle实践--PL/SQL表分区的基础
    js插件---jquery给表格添加行列
    m_Orchestrate learning system---三十四、使用重定义了$的插件的时候最容易出现的问题是什么
    2018十大国产佳片
    javascript对象使用总结
  • 原文地址:https://www.cnblogs.com/yitaqiotouto/p/9857254.html
Copyright © 2011-2022 走看看