当前位置: 首页 > Web前端 > HTML

让我们开始CSSGridLayout

时间:2023-04-02 19:07:42 HTML

前言三月中旬,有一个对CSS开发者来说非常重要的消息。Firefox和Chrome的最新版本已经正式支持CSSGrid的新特性。没错:我们现在可以在两个最流行的浏览器上玩玩CSSGrid了~(≧▽≦)/~为什么CSSGrid很重要?因为CSSGridLayout是Web的第一个真正的布局系统。它的目的是将内容组织成行和列,最终让开发人员能够高度控制页面在我们眼前的屏幕上的显示方式。这意味着我们终于可以摒弃多年来的各种黑客和技巧。CSSGrid布局不仅可以让复杂的布局和漂亮的排版成为可能,还可以让它变得干净和可维护。通过使用CSSGrid,Web开发变得更清晰,对开发人员更友好:-D。那么网格是如何工作的呢?有的教程讲的很详细,但是我觉得应该从最基础的知识开始。下面我们来实现一个比较简单的小例子,就是在页面上放置一串字母。在我们开始之前,让我们添加几个标签:A

B
首先,我们使用font-size和color来设置这些字母的字体和颜色,然后使用flexbox属性如align-items和justify-content来让它们居中。CSSGrid并没有取代flexbox属性,而是尽可能地保留了它们的功能。我们甚至可以将这些属性与CSSGrid结合起来。但是现在让我们回到演示:在上面的示例中,一个大的div包含两个默认属性为display:block的div。接下来,我们使用Grid布局来设置父元素:.wrapper{display:grid;}这里我放上完整的HTML和CSS代码:A
Bbody,html{填充:0;边距:0;}.wrapper{显示:网格;}.letter{背景颜色:#0069b3;显示:弹性;证明内容:居中;对齐项目:居中;填充:20px;字体大小:70px;白颜色;行高:1;font-family:'hobeaux-rococeaux-background',Helvetica;字体粗细:200;游标:指针;transition:all.3sease;}结果如下:现在您可能会发现似乎没有任何变化。为什么?这不像设置display:inline-block;或显示:内联;,当我们将布局设置为网格布局时,不会有明显的变化。事实上,为了让我们的网格工作,我们首先需要给它一个准确的行数和列数。在这个例子中,我们可以让两个字母并排排列:.wrapper{display:grid;网格模板列:1fr1fr;网格列间隙:1px;background-color:black;}让我们分解上面的代码。首先我们创建了一个带有grid-template-columns的两列网格,如果你以前没有见过这个,1fr可能看起来很奇怪,但它是一个有效的CSS单元,它将每一列列为我们的网格的一小部分。在此示例中,这意味着使两列宽度相等。效果如下:看到效果我就开心了,哈哈。但是看到两列之间的黑线了吗?这是包装器勾勒出的每个字母div的背景,因为我们将grid-column-gap设置为1px。通常,我们会设置一个较大的距离,特别是对于两个相邻的文本框。但在这种情况下,1px就足够了。如果我们再添加两个新字母呢?我们应该如何更改布局?ABCD看,加上两个字母后,并没有神奇的效果。添加两个字母对网格没有影响,为什么?因为我们设置成两列了,这两个字母的div直接放在他们下面,刚好是1fr宽:但是现在我有一个疑问,为什么字母A、C、B之间没有1px的距离D和D╭(╯^╰)╮因为grid-column-gap只用于列,所以我们刚才做的就是在网格布局中添加一行。那么你必须使用grid-row-gap才能看到想要的效果:.wrapper{grid-column-gap:1px;网格行间距:1px;/*otherstylesgohere*//*我们也可以使用简写的`grid-gap`*/}现在我们已经创建了一个只有一行和一列的网格布局,接下来我们必须更改标记。但是现在让我们挖掘出以下有趣的地方。如果我向grid-template-columns属性添加另一个值会怎样?像这样:.wrapper{grid-template-columns:1fr1fr1fr;}啊,这增加了一个新列。我们现在也可以清楚地看到包装器的背景,因为现在没有任何东西可以显示:如果我们改变fr,就会创建一个不对称的网格布局。假设我们希望网格的第一列是其他两列的三倍:这将使列A和D比其他两列宽:有趣,对吧?我们不需要担心网格列的负边距或完美百分比。我们可以轻松地进行非常复杂的网格布局,而不必像以前那样使用数学……现在我们只需要向grid-template-columns属性添加一个新值,网格列就会神奇地出现。你可能会问,那怎么=响应式网格?那其实很简单。例如,我们要默认显示2列。如果屏幕是500px,我们希望它显示为3列。如果屏幕较大,我们需要4列。只需写:.wrapper{display:grid;网格模板列:1fr1fr;@mediascreenand(min-width:500px){grid-template-columns:1fr1fr1fr;}@mediascreenand(min-width:800px){grid-template-columns:1fr1fr1fr1fr;}}确保你可以用你的电脑打开下面的Demo链接-Demoinanewwindow,试试改变浏览器窗口大小,看看响应效果。grid-template-columns属性比本文显示的更复杂,但本文是一个很好的起点。接下来,我们将学习CSSGrid中真正革命性的属性:grid-template-rows看下面一小段代码,结合我们所学的知识,搞清楚这个新属性能做什么:.wrapper{display:网格;网格模板列:3fr1fr1fr;grid-template-rows:1fr3fr;}我们现在可以设置行高之间的关系了。如果我们将前一行的高度设置为1fr,将最后一行的高度设置为3fr,这意味着第二行的高度将是第一行的3倍:这看起来很简单,我们以前从未真正做到过这一点。我们总是必须设置最小高度或更改特定元素的类名。我们从来没有像现在这样在行之间创建关系,这就是CSSGrid的强大之处。有了这些花絮和一些新属性,我们可以创建非常复杂的布局,而非对称网格和响应式网格只是冰山一角。到目前为止,这只是对CSSGrid的初步了解,还有很多内容尚未涵盖。但我认为JenSimmons在撰写有关Grid的文章时对其进行了最好的描述:我们将继续探索CSSGrid,直到我们弄清楚它正在尝试做什么、几乎不能做什么以及不能做什么。设计师可能永远学不会编写CSS,但对CSS的了解足以更好地理解我们的艺术媒介。当然,上面的代码一开始看起来会有些奇怪。但我想表达的是:我们不再需要使用臃肿的CSS框架,也不需要为一大堆繁琐的布局而烦恼。这就是CSSGrid真正让我兴奋的地方,它允许我们以全新的方式查看界面的显示。我们不仅需要学习一大堆新属性,而且还必须重新思考我们之前学到的东西。所以CSSGrid不仅仅是一个规范,它本身就是一个奇怪的哲学。让我们一起探索吧!浏览器支持绿色表示完全支持所列版本(及更高版本)。黄色表示部分支持。红色表示不支持。有关完整的浏览器支持详细信息,请参阅Caniuse。相关学习资源链接JenSimmonsRachelAndrewFirefox中的GridInspector工具超级好用网格完全指南原文:CSSGrid入门作者:ROBINRENDLE欢迎在评论区留下你的感想!欢迎大家关注知乎专栏:全栈成长之路文章保质保量(づ ̄3 ̄)づ╭?~也欢迎大家加入学习交流Q群:637481811