CSS 网格样式

Question

我正在尝试了解 CSS 网格的工作原理。我试着做一个商店项目的例子作为练习，但我不知所措。

这是我的 CSS 目前的样子。顶部截断，奇怪的间距，右侧根本没有合在一起。

它的理想外观如何

这是我目前的CSS，希望有人能帮忙解释一下我对使用的误解 CSS 个网格。

.store-currency {
    height: 3vh;
}

.item {
    display: flex;
    align-items: center;
    grid-row: 1 / span 2;

}

.currency {
    display: flex;
    align-items: center;

}

#num-bought-item0 {
    display: flex;
    align-items: center;
    justify-content: right;
    margin-right: 10px;
    grid-column: 1 / span 2;
}

.store-item {
    height: 15vh;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr;
    grid-template-rows: 1fr 1fr;
    font-size: 24px;
    color: white;
    border: 5px white solid;
    justify-content: left;
    align-items: center;
}

.store-item img {
    margin: 10px;
    height: 8vh;
}


.store-container {
    display: flex;
    height: 100%;
    width: 30vw;
    z-index: 0;
    background-color: saddlebrown;
    left: 0;
    position: absolute;
    text-align: center;
}

HTML:

 <div class="store-container">
        <div class="store-item" id="item0">
            <div class ="item">
                <img src="dumbell.png" alt="">
                <span>Dumbbell</span>
            </div>
            <div id="num-bought-item0">
                <span>Owned</span>
                <span id="count-item0">0</span>
            </div>
            <div class="currency">
                <img class="store-currency" src="coin.png" alt="">
                <span>100000</span>
            </div>
    </div>

Answer 1

您已完成第一步。

To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.

.store-container {
  display: grid | inline-grid;
}

网格——生成一个block-level网格
inline-grid – 生成一个 inline-level 网格

使用 grid-template-columns 您可以定义布局中将显示多少列。 P.S Fr 单位是小数单位，1fr 表示可用的 1 部分 space。在此示例中，每列将从可用 space.

中占用约 25%

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

对于您的任务，您可以使用 grid-template-areas 功能。

The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

例如：

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

这将在现代浏览器中生成类似的内容：

如果您需要更多示例，请查看此处： https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas https://css-tricks.com/snippets/css/complete-guide-grid/ 部分示例取自第二个站点。

Answer 2

您似乎在混合使用 flex 和 grid 属性。 grid-row 和 grid-column 仅适用于网格显示 (2D)，不适用于柔性显示 (1D)。

你可以尝试使用 flex （更糟糕的选择，因为它绘制的是一维布局），你可以使用 grid ，它是为这种布局而制作的。这里有几个 flex 和 grid

的例子

/* GRID make it simple*/
.grid {display:grid;}
#num-bought-item2 {grid-row:1/3;grid-column:2;}
#num-bought-item2 {display:grid;margin:auto;text-align:center}
/* layout done */

/* some reset for the demo*/
*{box-sizing:border-box;}
.store-container {display:grid;justify-content:center;}
.store-item {border:solid;}
.store-item>div {padding:0.5em;}
img{vertical-align:middle;}
[src="https://dummyimage.com/25/ff0"]{border-radius:50%}
big{color:darkgreen;background:lightyellow;}

/* FLEX make it a mess */
.flex {display:flex}
.column {flex-flow:column wrap;height:120px;}/* here an height is to be set so it wraps*/

/* since it is not made for this, we need to mess around */
.flex #num-bought-item1{order:2}/* reorder item */
.flex .item {height:0;min-height:60%;}/* hide it, then show it */
.flex .currency {height:0;min-height:40%;}/* hide it, then show it */
.flex #num-bought-item1{display:flex;flex-direction:column;justify-content:center;text-align:center;margin:auto;}
/* and flex did not do it */

  <p>Let's try via flex</p>
  <div class="store-container">
  <div class="store-item flex column" id="item1">
    <div class="item">
      <img src="https://dummyimage.com/50" alt="">
      <span>Dumbbell</span>
    </div>
    <div id="num-bought-item1" >
      <span>Owned</span>
      <span id="count-item1">0</span>
    </div>
    <div class="currency">
      <img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
      <span>100000</span>
    </div>
  </div>
</div>
<p>And via <big>grid</big> </p>
<div class="store-container">
  <div class="store-item grid" id="item2">
    <div class="item">
      <img src="https://dummyimage.com/50" alt="">
      <span>Dumbbell</span>
    </div>
    <div id="num-bought-item2" >
      <span>Owned</span>
      <span id="count-item1">0</span>
    </div>
    <div class="currency">
      <img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
      <span>100000</span>
    </div>
  </div>
</div>

CSS 网格样式

CSS Grid Styling

html

css

css-grid