代码之家 › 专栏 › 技术社区 › Chris Thomas

在创建特定的固定css网格布局时寻找关联

css-grid layout css3 css html

Chris Thomas · 技术社区 · 6 年前

我一直在努力使用css网格创建这个特定的布局。它需要修复,我来创建的网格容器是1100px宽,包括排水沟和壁板,但可以忽略的差距,只是为了使布局。

基本上是两列。一个是75%,另一个是25%。有六个网格区域。令我难堪的是行高的变化,以及是否存在隐式网格。

我设计了我想要的布局,包括固定尺寸。这些间隙都是20px,除了外部的左和右是40px,但是为了创建布局,可以忽略这一点。

标记如下:

<div id="page-wrapper">
  <div class="grid-container">

    <div class="1"></div>

    <div class="2"></div>

    <div class="3"></div>

    <div class="4"></div>

    <div class="5"></div>

    <div class="6"></div>

  </div>
</div>

我一直试图明确定义每一个区域,但都没有用。也许我错过了什么。这是布局设计

任何帮助或指向正确的方向与风格将不胜感激!谢谢。

1 回复 | 直到 6 年前

Paulie_D 6 年前

您需要将布局可视化为3列4行。类似于:

两列365px,另一列250px
一行200px,两行160px,最后一行200px。

有些项目将跨越两行或两列。

这是一个视觉布局。

因此,您的列和行将是:

  grid-template-columns: 365px 365px 250px;
  grid-template-rows: 200px 160px 160px 200px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.grid-container div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border: 1px solid blue;
}

.grid-container {
  display: grid;
  margin: 1em auto;
  grid-gap: 20px;
  border: 1px solid red;
  width: 1100px;
  grid-template-columns: 365px 365px 250px;
  grid-template-rows: 200px 160px 160px 200px;
  padding: 20px 40px;
}

.A1 {
  grid-column: 1 / span 2;
}

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

.A3,
.A4 {
  grid-row: 4;
}

.A5 {
  grid-row: 1 / span 2;
}

.A6 {
  grid-row: 3 / span 2;
}

<div class="grid-container">

  <div class="A1">1</div>

  <div class="A2">2</div>

  <div class="A3">3</div>

  <div class="A4">4</div>

  <div class="A5">5</div>

  <div class="A6">6</div>

</div>

https://codepen.io/Paulie-D/pen/zaxzeK

推荐文章

Chris Sherlock · 如何将图像调整为css网格

2 年前

Tagc · 是否可以使用flexbox同时执行“行反转”和“列反转”之类的操作?

6 年前

Tv's Very Own · 网格行间距未应用百分比

6 年前

arw89 · CSS网格中的纯CSS箭头div

6 年前

Arie B · 使用html节标记时在css网格中提供相同的css属性

6 年前

ctaylordev94 · CSS网格行属性由Less[重复]错误编译

6 年前

techguy2000 · css网格单元格内容溢出不工作

6 年前

techno geek · css网格布局的水平滚动

6 年前

dkrasniy · Flexbox换行仅第一列,带溢出滚动

6 年前

WoJ · 如何使用Vue构建动态CSS网格?

6 年前