使用css以特定方式定位html元素

Question

我正在尝试为我的网站为任何类型的产品设置一张卡片，我想使用网格，因为它似乎非常有效，但是我很难理解如何使用这些属性，例如

grid-template-columns

、

grid-template-rows

、

grid-gap

以及其他关于同一主题的内容。

我已经举了一个例子来说明我希望我的卡片是什么样子，：

左边是简单版本，右边是对我来说更复杂的版本，带有可切换的描述，希望它足够清晰。

这也是我的

<div>

的HTML结构的代码示例：

    <div class="grid-item accommodation">
        <input type="checkbox" id="${id}" class="accommodation-checkbox">
        <div class="content">
            <div style="background-image: url(${image})" alt="" class="accommodation-image"></div>
            <h3 class="title">${title}</h3>
            <div class="accom-desc">
                <p class="description">${description}</p>
                <p class="price">Price: ${price} €</p>
                <p class="seats">Seats: ${seats}</p>
            </div>
        </div>
    </div>

：

如您所见，我尝试组织它们，但我无法真正使其按照我想要的方式显示，无论是使用

display: grid

还是其他相关的网格元素。我不知道对这些有什么期望，因为我对 html 还很陌生。我并不是专门询问如何按照我想要的方式组织我的 html 元素的答案，而是更多关于我应该如何使用网格。

提前非常感谢您的回答。

Answer 1

要创建您附加的布局，您只需要使用网格列，它确定网格内的列数。实现此布局的基本属性是：

1. grid-template-columns

   ：此属性定义网格中列的数量和大小。

2. grid-column

   ：它指定网格内元素的位置，有效地将其放置在特定的列中。

3. grid-column-start

   ：此属性告诉元素在网格列中从哪里开始。

这些属性将帮助您创建所需的网格布局。

这是我的做法

HTML

<div class="container">
  <div class="one">1</div>
  <div class="sub-container">
    <div class="child two">2</div>
    <div class="child three">3</div>
  </div>
  <div class="details">
    <div class="child four">4</div>
    <div class="child five">5</div>
    <div class="child six">6</div>
  </div>
</div>

一些

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.child {
  height: 200px;
  border: 0.1em solid;
}
.one {
  grid-column: span 1;
  grid-row: span 2;
  background-color: aqua;
}
.sub-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.two {
  background-color: red;
}
.three {
  background-color: blue;
}
.details {
  grid-column-start: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.four {
  grid-column: span 2;
  background-color: yellow;
}
.five {
  background-color: green;
}
.six {
  background-color: brown;
}