欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網格問題，可能是高度問題

CSS
林雅南2年前7瀏覽0評論

布局中顯示了什么:

layout

我做了什么:

my work

代碼:

.portfolio__items{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 15px;
}

.portfolio__item-img{
  background: #EDEDED;
  border: 12px solid rgba(237, 237, 237, 1);
  color: #EDEDED;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all .5s;
}

.portfolio__item-img:hover{
  background: linear-gradient(0deg, rgba(36, 33, 33, 0.8), rgba(36, 33, 33, 0.8)), #EDEDED;
  border: 12px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.portfolio__item-img-1, .portfolio__item-img-2{
  grid-column-start: 1;
}

.portfolio__item-img-3, .portfolio__item-img-4, .portfolio__item-img-5{
  grid-column-start: 2;
}

.portfolio__item-img-6, .portfolio__item-img-7{
  grid-column-start: 3;
}

.portfolio__item-img-8, .portfolio__item-img-9{
  grid-column-start: 4;
}

.portfolio__item-img-1{
  grid-row-start: 1;
  grid-row-end: 5;
}

.portfolio__item-img-2{
  grid-row-start: 5;
  grid-row-end: 10;
}

.portfolio__item-img-3{
  grid-row-start: 1;
  grid-row-end: 4;
}

.portfolio__item-img-4{
  grid-row-start: 4;
  grid-row-end: 7;
}

.portfolio__item-img-5{
  grid-row-start: 7;
  grid-row-end: 10;
}

.portfolio__item-img-6{
  grid-row-start: 1;
  grid-row-end: 6;
}

.portfolio__item-img-7{
  grid-row-start: 6;
  grid-row-end: 10;
}

.portfolio__item-img-8{
  grid-row-start: 1;
  grid-row-end: 4;
}

.portfolio__item-img-9{
  /* grid-row-start: 4; */
  /* grid-row-end: 10; */
}

<div class="portfolio__items">
      <div class="portfolio__item-img portfolio__item-img-1">
        <div class="portfolio__item-title">OCCA CUPIDATAT 1</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-2">
        <div class="portfolio__item-title">OCCA CUPIDATAT 2</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-3">
        <div class="portfolio__item-title">OCCA CUPIDATAT 3</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-4">
        <div class="portfolio__item-title">OCCA CUPIDATAT 4</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-5">
        <div class="portfolio__item-title">OCCA CUPIDATAT 5</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-6">
        <div class="portfolio__item-title">OCCA CUPIDATAT 6</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-7">
        <div class="portfolio__item-title">OCCA CUPIDATAT 7</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-8">
        <div class="portfolio__item-title">OCCA CUPIDATAT 8</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
      
      <div class="portfolio__item-img portfolio__item-img-9">
        <div class="portfolio__item-title">OCCA CUPIDATAT 9</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
    </div>

目前。portfolio__item-img-9元素沒有任何網格屬性，如grid-row-start和grid-row-end(它們被注釋掉了)，如果我取消它們的注釋，其他元素的屬性將停止工作

我覺得我問題的原因是父div。portfolio__items對于它的孩子來說沒有足夠的高度，但我不確定這一點。

我試著給它增加一些高度，但是它什么也沒做。

你是正確的。這個問題是由于容器上缺少規(guī)定的高度造成的。

.portfolio__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 15px;
  height: 100vh; /* new */
}

body {
  margin: 0; /* to override browser default */
}

.portfolio__item-img {
  background: #EDEDED;
  border: 12px solid rgba(237, 237, 237, 1);
  color: #EDEDED;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all .5s;
}

.portfolio__item-img:hover {
  background: linear-gradient(0deg, rgba(36, 33, 33, 0.8), rgba(36, 33, 33, 0.8)), #EDEDED;
  border: 12px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.portfolio__item-img-1,
.portfolio__item-img-2 {
  grid-column-start: 1;
}

.portfolio__item-img-3,
.portfolio__item-img-4,
.portfolio__item-img-5 {
  grid-column-start: 2;
}

.portfolio__item-img-6,
.portfolio__item-img-7 {
  grid-column-start: 3;
}

.portfolio__item-img-8,
.portfolio__item-img-9 {
  grid-column-start: 4;
}

.portfolio__item-img-1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

.portfolio__item-img-2 {
  grid-row-start: 5;
  grid-row-end: 10;
}

.portfolio__item-img-3 {
  grid-row-start: 1;
  grid-row-end: 4;
}

.portfolio__item-img-4 {
  grid-row-start: 4;
  grid-row-end: 7;
}

.portfolio__item-img-5 {
  grid-row-start: 7;
  grid-row-end: 10;
}

.portfolio__item-img-6 {
  grid-row-start: 1;
  grid-row-end: 6;
}

.portfolio__item-img-7 {
  grid-row-start: 6;
  grid-row-end: 10;
}

.portfolio__item-img-8 {
  grid-row-start: 1;
  grid-row-end: 4;
}


/* uncommented */

.portfolio__item-img-9 {
  grid-row-start: 4;
  grid-row-end: 10;
}

<div class="portfolio__items">
  <div class="portfolio__item-img portfolio__item-img-1">
    <div class="portfolio__item-title">OCCA CUPIDATAT 1</div>
    <div class="portfolio__item-descr">DESIGN</div>
  </div>

  <div class="portfolio__item-img portfolio__item-img-2">
    <div class="portfolio__item-title">OCCA CUPIDATAT 2</div>
    <div class="portfolio__item-descr">DESIGN</div>
  </div>

  <div class="portfolio__item-img portfolio__item-img-3">
    <div class="portfolio__item-title">OCCA CUPIDATAT 3</div>
    <div class="portfolio__item-descr">DESIGN</div>
  </div>

  <div class="portfolio__item-img portfolio__item-img-4">
    <div class="portfolio__item-title">OCCA CUPIDATAT 4</div>
    <div class="portfolio__item-descr">DESIGN</div>
  </div>

  <div class="portfolio__item-img portfolio__item-img-5">
    <div class="portfolio__item-title">OCCA CUPIDATAT 5</div>
    <div class="portfolio__item-descr">DESIGN</div>
  </div>

  <div class="portfolio__item-img portfolio__item-img-6">
    <div class="portfolio__item-title">OCCA CUPIDATAT 6</div>
    <div class="portfolio__item-descr">DESIGN</div>
  </div>

  <div class="portfolio__item-img portfolio__item-img-7">
    <div class="portfolio__item-title">OCCA CUPIDATAT 7</div>
    <div class="portfolio__item-descr">DESIGN</div>
  </div>

  <div class="portfolio__item-img portfolio__item-img-8">
    <div class="portfolio__item-title">OCCA CUPIDATAT 8</div>
    <div class="portfolio__item-descr">DESIGN</div>
  </div>

  <div class="portfolio__item-img portfolio__item-img-9">
    <div class="portfolio__item-title">OCCA CUPIDATAT 9</div>
    <div class="portfolio__item-descr">DESIGN</div>
  </div>
</div>