Question

我是否错过了使用CSS显示的技巧：网格？

我有以下示例 - https://codepen.io/anon/pen/NyRVeO

我们正在尝试使用

创建一个两列模板

grid-template-columns:1fr 3fr;
grid-gap:20px;
grid-template-areas:'title title' 
                  'image map' 
                  'address map' 
                  'floorplan accessibility' 
                  'facilities parking' 
                  'teams bicycle'
                  '. meetingrooms'
                  '. evacuation';

目前，由于网格排，它在平面图和停车位之间存在相当大的空白。

有没有办法避免这种情况？

我知道我可以将左边的所有项目包装在一个相关的div中然后这样可以避免这个问题，但我真的想避免这个。

页面示例将由CMS模板生成，理想情况下，我们尝试让设计人员使用CSS网格在页面周围移动元素，而不必修改HTML标记和模板。

我不确定我想要什么是可能的，但我想我会问我错过了一个技巧。

谢谢：）

Answer 1

我看到的一个解决方案是将网格划分为2个主要区域，侧边栏和内容（也是标题，使其成为3）。

我将这些2制作成了自己的网格，只是为了简化模板行设置。我不确定这是不是你的想法，但现在网格中的每一列从上到下都没有不必要的间隙 - 但请注意，现在侧边栏项和内容项不再对齐了

CodePen：https://codepen.io/chenasraf/pen/VQmZZL

CSS：

main {
  width:100%;
  display:grid;
  grid-template-columns:1fr 3fr;
  grid-gap:20px;
  grid-template-areas: 'title title'
                       'sidebar main';
}

.content, .sidebar {
  display: grid;
  grid-row-gap: 20px;
}

.content {
  grid-template-areas:
                  'map' 
                  'map' 
                  'accessibility' 
                  'parking' 
                  'bicycle'
                  'meetingrooms'
                  'evacuation';
}

.sidebar {
  grid-template-areas:
                  'image' 
                  'address' 
                  'floorplan' 
                  'facilities' 
                  'teams';
}

HTML：

<main>
    {...title...}

    <div class="sidebar">
        {...sidebar stuff...}
    </div>
    <div class="content">
        {...main content...}
    </div>
</main>

注意：根据经验，网格与表格完全相同 - 从某种意义上说，它们不会以类似砖石的方式组织自己，而是每个单元格将整个行/列扩展为确保它能适合所有内容。

如何使用CSS显示避免空白：网格

1 个答案: