代码之家 › 专栏 › 技术社区 › CobaltGecko

CSS网格样式

css-grid css html

CobaltGecko · 技术社区 · 2 年前

我正在努力了解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>

1 回复 | 直到 2 年前

DeanTwit 2 年前

你迈出了第一步。

要开始,您必须将容器元素定义为具有显示的网格: 网格 ,使用设置列和行的大小 轴网模板列 和 网格模板行 ,然后将其子元素放置到具有网格列和网格行的网格中。

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

栅格生成块级栅格
内联网格生成内联级别的网格

使用网格模板列,可以定义布局中显示的列数。 P.S-Fr单位是分数单位,1fr表示可用空间的1部分。在本例中,每列将占用可用空间的约25%。

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

对于您的任务,您可以使用网格模板区域功能。

网格模板区域CSS属性指定命名网格区域, 在网格中建立单元格并为其指定名称。

例如:

.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/ 一些例子取自第二个网站。

G-Cyrillus 2 年前

看起来您正在混合弹性和网格特性。栅格行和栅格列仅可用于栅格显示器(2D)而不可用于柔性显示器(1D)。

你可以尝试使用flex(更糟糕的选择,因为它绘制的是1D布局),你可以使用网格,这是为这种布局设计的。这里有一个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>