CSS Grid -网格区域堆叠而不是并排放置

np8igboo 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(135)

我试图在Vue应用程序中使用CSS Grid创建一个 Jmeter 板，但是tiles（grid-template-areas）是堆叠在彼此之上的，而不是彼此相邻。当我在devtools中将鼠标悬停在网格容器上时，我可以看到它分为3列，但所有内容都挤在第一列中。
我尝试过更改grid-template-column值;添加边距、高度和宽度;以及改变位置和显示属性。
提前感谢您的任何建议。

Vue HTML模板：

<template>
    <div id="dashboard-container">
        <h1>My Dashboard</h1>
        <div id="dashboard-tiles">
            <div id="dashboard-tile-1" class="dashboard-tile">
                <img class="dashboard-tile-logo" src="../assets/example-img.jpg" alt=""/>
                <p class="dashboard-tile-name">Tile 1</p>
            </div>
            <div id="dashboard-tile-2" class="dashboard-tile">
                <img class="dashboard-tile-logo" src="../assets/example-img.jpg" alt=""/>
                <p class="dashboard-tile-name">Tile 2</p>
            </div>
            <div id="dashboard-tile-3" class="dashboard-tile">
                <img class="dashboard-tile-logo" src="../assets/example-img.jpg" alt=""/>
                <p class="dashboard-tile-name">Tile 3</p>
            </div>
        </div>
    </div>
</template>

Vue样式（CSS）：

#dashboard-container {
        border: 2px dashed black;
    }
    #dashboard-tiles {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-areas: "dashboard-tile-1 dashboard-tile-2 dashboard-tile-3";
    }
    .dashboard-tile {
        border: 2px solid black;
        height: 7em;
        margin: 2em;
        width: 7em;
    }
    #dashboard-tile-1 {
        grid-area: dashboard-tile-1;
    }
    #dashboard-tile-2 {
        grid-area: dashboard-tile-2;
    }
    #dashboard-tile-3 {
        grid-area: dashboard-tile-3;
    }
    .dashboard-tile-logo, .dashboard-tile-name {
        display: block;
    }
    .dashboard-tile-logo {
        height: 1.5em;
    }

css

来源：https://stackoverflow.com/questions/76541644/css-grid-grid-areas-stacking-instead-of-sitting-side-by-side

1条答案

按热度按时间

dsf9zpds1#

如前所述，您提供的示例按预期工作。也许您的浏览器正在为您提供缓存的CSS文件？

#dashboard-container {
  border: 2px dashed black;
}

#dashboard-tiles {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas: "dashboard-tile-1 dashboard-tile-2 dashboard-tile-3";
}

.dashboard-tile {
  border: 2px solid black;
  height: 7em;
  margin: 2em;
  width: 7em;
}

#dashboard-tile-1 {
  grid-area: dashboard-tile-1;
}

#dashboard-tile-2 {
  grid-area: dashboard-tile-2;
}

#dashboard-tile-3 {
  grid-area: dashboard-tile-3;
}

.dashboard-tile-logo,
.dashboard-tile-name {
  display: block;
}

.dashboard-tile-logo {
  height: 1.5em;
}

<div id="dashboard-container">
  <h1>My Dashboard</h1>
  <div id="dashboard-tiles">
    <div id="dashboard-tile-1" class="dashboard-tile">
      <img class="dashboard-tile-logo" alt=""/>
      <p class="dashboard-tile-name">Tile 1</p>
    </div>
    <div id="dashboard-tile-2" class="dashboard-tile">
      <img class="dashboard-tile-logo" alt=""/>
      <p class="dashboard-tile-name">Tile 2</p>
    </div>
    <div id="dashboard-tile-3" class="dashboard-tile">
      <img class="dashboard-tile-logo" alt=""/>
      <p class="dashboard-tile-name">Tile 3</p>
    </div>
  </div>
</div>

我决定向您展示如何使用更少的CSS和HTML属性来实现结果。在所提供的示例中，不需要定义网格区域，也不需要为每个HTML元素给予类或ID。

#dashboard-container {
  border: 2px dashed black;
}

#dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-around;
}

#dashboard-tiles div {
  border: 2px solid black;
  height: 7em;
  width: 7em;
}

#dashboard-tiles img {
  display: block;
  height: 1.5em;
}

<div id="dashboard-container">
  <h1>My Dashboard</h1>
  <div id="dashboard-tiles">
    <div>
      <img alt="">
      <p>Tile 1</p>
    </div>
    <div>
      <img alt="">
      <p>Tile 2</p>
    </div>
    <div>
      <img alt="">
      <p>Tile 3</p>
    </div>
  </div>
</div>

实际上，在这个例子中，使用Flexbox而不是Grid会更简单。

#dashboard-container {
  border: 2px dashed black;
}

#dashboard-tiles {
  display: flex;
  justify-content: space-around;
}

#dashboard-tiles div {
  border: 2px solid black;
  height: 7em;
  width: 7em;
}

#dashboard-tiles img {
  display: block;
  height: 1.5em;
}

<div id="dashboard-container">
  <h1>My Dashboard</h1>
  <div id="dashboard-tiles">
    <div>
      <img alt="">
      <p>Tile 1</p>
    </div>
    <div>
      <img alt="">
      <p>Tile 2</p>
    </div>
    <div>
      <img alt="">
      <p>Tile 3</p>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

CSS Grid -网格区域堆叠而不是并排放置

1条答案

相关问题

热门标签

最新问答