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

  • 相关阅读:
    实验3 简单的分支与循环结构 2.利用循环计算n个圆柱体体积。
    实验 3 简单的分支与循环结构 第一题 编写求圆面积的程序,要求当输入的半径r<=0时,提示输入错误,要求r为浮点型,r的数值是动态的由键盘输入
    心得3
    作业 3 应用分支与循环结构解决问题
    实验5 函数
    实验1 题目2
    第三,四章学习心得
    第2章学习心得
    第一章学习心得
    5-3
  • 原文地址:https://www.cnblogs.com/yitaqiotouto/p/9857254.html
Copyright © 2011-2022 走看看