css 网格布局_使用CSS网格创建破碎的网格布局

最新推荐文章于 2024-07-18 17:34:14 发布

daique1908

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量322

点赞数

文章标签： css java html python 人工智能

css 网格布局

在本教程中，我们将使用CSS Grid来帮助我们创建“破碎的网格布局”，而这对于更传统CSS布局方法而言始终是困难的。

这是我们正在努力的目标（请查看较大的版本以获取完整效果）：

此设计基于Anthony Harmon的工作，而Anthony Harmon的工作非常适合我们的演示。看看他为Rel Acoustics做的这种布局：

网络图形设计

多年来，Web设计人员已经习惯于观察文档流和源顺序。通过浮动块创建布局，并让它们像砌砖一样填充页面。在响应式设计领域，这种方法似乎很自然。但是，这与印刷版图相去甚远，在印刷版图上，固定尺寸意味着设计师可以放心地将文本和图像准确地放置在所需位置，从而获得更具实验性和视觉效果的版式。

CSS Grid不仅可以让我们沿x和y轴排列事物，还可以帮助我们弥合布局差距，并使我们的设计更加大胆！

“我们必须开始重新想象重叠的事物有什么好的图形设计。” – 詹·西蒙斯（ Jen Simmons）

是时候陷入困境了。

1.定义网格

网格列不必是统一的。让我们看一下上面布局的一部分，弄清楚网格的外观。

注意：我们只是在本教程中构建一个部分。没有理由不能从独立的网格构建每个页面部分。

我们将从一些标记开始，一个网格容器：

<section class="grid1">
  
</section>

接下来，在该容器上，我们将声明display: grid; 然后定义列和行。

.grid1 {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
  grid-template-rows: 100px auto 15px auto auto;
}

列的布局与在上图中看到的一样。 fr单位是整个宽度的一小部分，因此第一列占据其中的三列，第二列更宽并占据六列。我们的布局总共包括27个宽度单位-几乎没有经典的网格比例！

行有些不同。您会看到固定像素测量值和auto像素值的混合。在使用auto情况下，该行将根据内容而增加和缩小。

2.制作图像

让我们从图像开始。对于标记，我们有两个选择。我们要么使用img元素，要么使用具有图像背景的其他元素。

我们可以使用object-fit: cover; 关于img元素，但这很棘手–为什么使我们的生活更加困难？因此，对于本演示，我们将继续使用后者，因为这在图像比例随流体布局变化方面具有更大的灵活性。

向一些不错的div打个招呼：

<div class="img1"></div>
  
  <div class="img2"></div>
  
  <div class="img3"></div>

有一些背景图片可以覆盖它们：

.img1 {  
  background: url(wooden.jpg);
  background-size: cover;
}

.img2 {  
  background: url(speaker.jpg);
  background-size: cover;
}

.img3 {  
  background: url(waves.jpg);
  background-size: cover;
}

3.放置图像

Grid的自动放置算法已经将它们整齐地放在了我们的网格上，但是让我们具体一点。我们将使用网格线来指示每个元素应在何处开始和结束。

我们的第一个图像从第1列开始，到3结束。我们可以这样定义：

grid-column: 1 / 3;

或像这样：

grid-column: 1 / span 2;

就行而言，我们的第一个图像需要从第2行开始，到第5行结束，我们可以这样声明：

grid-row: 2 / 5;

或这个：

grid-row: 2 / span 3;

现在让我们对其他两个图像执行相同的操作。这就是您应该得到的：

诚然，它并不是特别令人印象深刻，但这是因为大多数行还没有任何高度。一旦我们开始在下一步中添加更多内容，他们就会明白。

4.添加更多内容

现在添加文本内容；包装器中的块引用，以及号召性用语块。您可以将它们添加到任何地方作为.grid1容器的子元素，源顺序实际上并不重要。

<div class="strapline">
    <blockquote>“Almost immediately, word spread of a Welshman who had built this incredible sounding sub bass system, and soon enough audiophiles began searching out these legendary subs that were built like no other.”</blockquote>
</div>
  
<div class="cta-wrapper">  
    <div class="cta">
        <h1>Gibraltar</h1>
        <p>Introducing 212/SE, our most powerful and agile subwoofer, designed exclusively for larger systems and rooms to allow superior state of the art speakers to spring to full voice.</p>
        <a class="button" href="">View Product Details →</a>
    </div>
</div>

接下来，在对任何样式进行样式设置之前，我们都将它们放置在网格上，就像处理图像一样：

.strapline {
  grid-column: 3 / span 3;
  grid-row: 2 / span 1;
}

.cta-wrapper {
  grid-column: 4 / span 2;
  grid-row: 4 / span 2;
}

看起来更好！

在这一点上，值得注意的是，您可以根据需要使用z-index。默认情况下，堆叠遵循源顺序。标记中的第一个内容将放置在底部，随后声明的内容将放置在顶部。但是，如果要应用z-index: 1; 到.img1 ，它将堆叠在.img2 。

5.检查未检查的

如今，打开浏览器检查器将为您提供有关网格布局的帮助。在Chrome的检查器中，选择元素将拉起网格线和测量值，如下所示：

Firefox中的检查器将做更多的事情，允许您使用“ 布局”选项卡下的控件覆盖网格。您可以显示行号，区域名称，并在较小的缩略图版本上浏览网格区域：

提示：在“ 规则”标签下查看时，点击display旁边的网格图标以切换叠加层：

通过检查网格，您将快速意识到是否放错了任何网格项，在此处或此处跳过了一行或命名不正确。

6.样式化内容

一些快速的字体声明和按钮样式将使外观看起来更好，而无需付出太多努力。我们将从在文档的<head>中链接一些Google字体开始：

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:400,400i,700" rel="stylesheet">

我们将Open Sans用于正文，将Playfair Display用于块引用和标题。让我们应用它们：

body {
  color: #292929;
  font: 1em/1.7 'Open sans', sans-serif;
}

blockquote {
  font: italic 1.1em/2 'Playfair Display', serif;
  margin: 0 0 2em 0;
}

.cta h1 {    
  font: bold 6em/1 'Playfair Display', serif;
  margin: 0 0 20px 0;
  position: relative;
}

现在一些按钮样式：

.button {
  display: inline-block;
  color: white;
  text-decoration: none;
  background: #292929;
  padding: .8em 1.5em;
}

.button:hover {
  background: black;
}

最后，我们将blockquote对准中心，然后在号召性用语中添加一些填充，以帮助填充已放置的行。这是您现在应该拥有的：

请记住，我们正在为宽视口构建布局。您在教程中看到的嵌入内容可能看起来不是最佳的。

7.添加视觉效果

我们正在努力的设计具有一些尚未使用的视觉效果。我们可以以各种方式添加这些，但他们没有这样的内容 ，我们将使用CSS伪元素添加。首先，在blockquote上方的花样：

.strapline {
  margin-top: 100px;
  position: relative;
}

.strapline::before {
  content: '';
  display: block;
  background: url(wavy.svg) repeat-x;
  background-size: cover;
  width: 20%;
  height: .5em;
  position: absolute;
  top: -3em;
  left: 40%;
}

这些样式在.strapline div上使用::before伪元素，并使用负的顶部位置将其.strapline在容器自身上方。它完全居中，您会记住，我们通过将第一行定义为100px高来为其留出了足够的空间。

我们将在标题上对SVG徽章执行类似的操作：

.cta h1::before {
    content: '';
    display: block;
    height: 1em;
    width: 1em;
    background: url(badge.svg) no-repeat center center;
    background-size: 80%;
    position: absolute;
    left: -120px;
    top: 0;
  }

同样，我们使用伪元素，因为它只是视觉上的繁荣，而不是有价值的内容。但这并不是说您不能将其作为<img>到标记中。然后，您可以使用CSS Grid或Flexbox在号召性用语中安排内容的布局-您可以轻松掌握许多选择！

现在，我们为自己构建了一个非常坚实的破碎网格布局！是时候采取一些进一步的措施了。

8.后续步骤：浏览器支持

尽管IE11仍需要前缀版本，但CSS Grid如今已得到很好的支持，因此您可能希望将网格样式包装在@supports声明中。看起来像这样：

@supports (display: grid) {
 
    /* grid layout */
    .grid1 {
        display: grid;
        grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
        grid-template-rows: 100px auto 15px auto auto;
    }
    
    ...
 
}

任何不正确支持CSS Grid的浏览器都将忽略您在此声明中放置的内容，从而提供了提供后备选项的选项。

查看Grid的“后备”，以及有关如何根据需要设置后备样式的想法的替代。

9.后续步骤：响应Swift

在较大的屏幕上，我们的布局看起来很清晰，但是当挤压到较小的视口时（例如当嵌入到本教程中时），会出现一些裂缝。您将如何以响应方式处理此问题？添加媒体查询将使您可以先建立样式，然后逐渐建立布局以使视口变宽，使网格更加复杂：

.grid1 {
    display: grid;
    grid-template-columns: 1fr 1fr;   
}

@media only screen and (min-width: 768px) {
  
  .grid1 {
    grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
    grid-template-rows: 100px auto 15px auto auto;
  }
  
}

您可能还选择隐藏我们在较小的设备上创建的样式，然后保存它们，直到有更多的屏幕空间可供使用。这是你的选择！

这是一个示例，说明如何使此特定设计具有响应能力。

结论

本教程使您了解了CSS Grid可以实现的替代布局的世界。忘记您一直在使用浮动和定位练习的布局；打破那些旧习惯！开始探索更复杂的布局，让我们看看是否可以使网络更加有趣。

翻译自: https://webdesign.tutsplus.com/tutorials/create-a-broken-grid-layout-using-css-grid--cms-30870

css 网格布局

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 网格布局_使用CSS网格创建破碎的网格布局

在本教程中，我们将使用CSS Grid来帮助我们创建“破碎的网格布局”，而这对于更传统CSS布局方法而言始终是困难的。这是我们正在努力的目标（请查看较大的版本以获取完整效果）：此设计基于Anthony Harmon的工作，而Anthony Harmon的工作非常适合我们的演示。看看他为Rel Acoustics做的这种布局：干杯安东尼:) 网络图形设计多年来，We...
复制链接

扫一扫