如何使用 CSS display:grid 避免白色 space

Question

我是不是错过了使用 CSS display:grid 的技巧？

我有以下示例 - 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 个自己的网格，只是为了简化模板行设置。我不确定这是否是您的想法，但现在网格中的每一列都从上到下没有不必要的间隙 in-between - 但请注意现在侧边栏项目和内容项目不是不再对齐。

代码笔：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>

注意： 根据经验，网格与表格完全一样 - 从某种意义上说，它们不会以 masonry-like 的方式组织自己，而是每个单元格展开整个 row/column 以确保它可以容纳所有内容。

如何使用 CSS display:grid 避免白色 space

How to avoid white space using CSS display:grid

css

css-grid