Question

有人可以帮助我弄清楚为什么import osmnx as ox import matplotlib.pyplot as plt import geopandas ox.config(use_cache=True, log_console=True) # option 1: display all neighborhoods in a single figure/axis places = ['Hyde Park, London, UK', 'Kensington Gardens, London, UK', 'Regents Park, London, UK', 'Hampstead Heath, London, UK', 'Alexandra Park, London, UK', 'Clissold Park, London, UK', 'Finsbury Park, N4 2NQ, London, UK', 'Russell Square, London, UK'] gdf = ox.gdf_from_places(places) fig, ax = ox.plot_shape(gdf) # option 2: display each neighborhood in its own axis in a single figure fig, axes = plt.subplots(nrows=2, ncols=4) axes = axes.flat for ax, i in zip(axes, gdf.index): gdf.loc[i:i]['geometry'].plot(ax=ax) ax.axis('off') plt.show()没有覆盖以下代码段的第三行吗？（而且，为什么第三行这么远又会产生垂直滚动条？）

很抱歉问到这可能是一个非常基本的问题，这是一个附带项目，我通常不自己做CSS，只是尝试学习网格，因为这对我来说是最自然的。

注意：我猜.side等同于grid-row: 2（其余相同），但我明确地写它只是为了100％确定（没有区别）。

grid-row: 2 / 2

.layout {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 250px 1fr;
}

header {
  grid-row: 1 / 1;
  grid-column: 2 / 2;
  background-color: #ccf;
}

.side {
  grid-row: 1 / 3;
  grid-column: 1 / 1;
  background-color: #ddd;
}

.main {
  grid-row: 2 / 2;
  grid-column: 2 / 2;
}

footer {
  grid-row: 3 / 3;
  grid-column: 2 / 2;
  background-color: #ccf;
}

Answer 1

您只需要将3更改为4，就可以从.side开始于第一行（第1行的顶部），结束于第四行（第3行的底部）。这里有很好的资源：https://css-tricks.com/snippets/css/complete-guide-grid/

.layout {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 250px 1fr;
}

header {
  grid-row: 1 / 1;
  grid-column: 2 / 2;
  background-color: #ccf;
}

.side {
  grid-row: 1 / 4;
  grid-column: 1 / 1;
  background-color: #ddd;
}

.main {
  grid-row: 2 / 2;
  grid-column: 2 / 2;
}

footer {
  grid-row: 3 / 3;
  grid-column: 2 / 2;
  background-color: #ccf;
}

<div class="layout">
  <header>header</header>
  <div class="side">side</div>
  <div class="main">main</div>
  <footer>footer</footer>
</div>

Answer 2

您应该在n+1中使用grid-row-end将元素放置到第n行。您的代码必须像这样：

.layout {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 250px 1fr;
}

header {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background-color: #ccf;
}

.side {
  grid-row: 1 / 4;
  grid-column: 1 / 2;
  background-color: #ddd;
}

.main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

footer {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  background-color: #ccf;
}

<div class="layout">
  <header>header</header>
  <div class="side">side</div>
  <div class="main">main</div>
  <footer>footer</footer>
</div>

Answer 3

.layout {
  display: grid;
  height: 100vh;
  grid-template-rows: 50px 1fr 50px;
  grid-template-columns: 250px 1fr;
}
header {
  grid-row: 1 / 1;
  grid-column: 2 / 2;
  background-color: #ccf;
}
.side {
  grid-row: 1 / 4;
  grid-column: 1 / 1;
  background-color: #ddd;
}
.main {
  grid-row: 2 / 2;
  grid-column: 2 / 2;
}

footer {
  grid-row: 3 / 3;
  grid-column: 2 / 2;
  background-color: #ccf;
}

<div class="layout">
  <header>header</header>
  <div class="side">side</div>
  <div class="main">main</div>
  <footer>footer</footer>
</div>

网格布局：单元格未覆盖所有指定的行

3 个答案: