css 网格布局_学习CSS网格布局：带有示例的基本概念

最新推荐文章于 2024-09-13 21:40:38 发布

dfsgwe1231

最新推荐文章于 2024-09-13 21:40:38 发布

阅读量117

点赞数

文章标签： java css python html 编程语言

原文链接：https://hackernoon.com/learning-css-grid-layout-basic-concepts-with-example-y79w36tk

版权

css 网格布局

级联样式表（CSS）网格布局是CSS中最重要，功能最强大的布局系统。它建在二维内部
系统，这意味着它可以同时处理列和行。您可以建立一个
通过将CSS规则应用于grid元素和
父元素。

CSS网格布局（ <grid> ）是基于二维网格的布局
旨在改变我们格式化基于网格的用户的方式的系统
界面（UI）。 CSS帮助Web开发人员在整个环境中创建统一的外观
网站的几个页面。而不是定义每个样式
表格和HTML文件中的每个文本块。但是大多数网络
开发人员将同意它做得不好。第一，
开发人员尝试使用表格，然后进行浮动，定位和
内联代码块，但所有这些方法本质上都是黑客和
遗漏了许多重要的功能。

网格是专门为解决布局问题而创建的第一个CSS模块，自我们创建网站以来，我们一直在探索自己的方式。

要了解有关其功能的更多信息，请查看上图（基本网格系统）

如您所见，网格是一个简单的元素块，可让您
将其中包含的任何元素放置在特定区域内
由于具有二维特性，因此具有特定的尺寸

首先，我们需要了解一些基本术语
更好地了解什么是网格。

网格容器

网格容器是所有网格项目的直接父级。和我们
将在我们的代码中使用“显示样式元素”来调用它
然后将添加Grid属性。

<!DOCTYPE html>
< html >
< head >
< style > 

.container {
  display : grid;
}

 </ style >

</ head >
< body >

< h1 > Grid Layout </ h1 >

< p > This grid layout contains four grid items </ p >

< div class = ".container" >
  < div class = "item1" > </ div >
  < div class = "item2" > </ div >
  < div class = "item3" > </ div >  
  < div class = "item4" > </ div >
</ div >

</ body >
</ html >

网格项

网格项是网格容器的直接后代。的
网格项中的元素不是。为了演示，
下图中项目的元素是网格项目，但是
子项不是。

<!DOCTYPE html>
< html >
< head >
< style > 

.container {
  display : grid;
}

 </ style >

</ head >
< body >

< h1 > Grid Layout </ h1 >

< p > This grid layout contains two grid items </ p >

< div class = ".container" >
  < div class = "item1" >
    < h2 class = "sub-item" > </ h2 >
    < p class = "sub-item" > </ p >
  </ div >
  < div class = "item2" >
    < img class = "sub-item" > </ img >
    < div class = "sub-item" > </ div >
  </ div >
</ div >

</ body >
</ html >

网格线

网格线是负责绘制2D网格的线。他们可以
可以是垂直或水平。垂直的确能形成一条线
给我们每一列的比例，水平列使
为我们显示行线的线。

在下面的示例中，您将能够更好地理解
什么是网格线，将以黄色上色。这个
线代表为我们绘制包含四列的网格的5条线之一。