一个网格项正在影响另一个（父）网格的网格项

问题描述 投票：0回答：1

我有以下代码，运行良好。

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  width: 100%;
}

body {
  font-family: monospace;
  background-color: aliceblue;
}

.container {
  width: 75vw;
  margin-inline: auto;
  background-color: antiquewhite;
}

.wrapper {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: auto;
  gap: 2em;
}

h1 {
  padding: 20px 10px;
}

h2 {
  text-align: left;
}

.margin-right {
  margin-right: 2em;
}

.margin-bottom {
  margin-bottom: 1em;
}

.align-center {
  text-align: center;
}

.item {
  display: grid;
  place-items: center;
  grid-auto-rows: 200px;
  grid-template-rows: 70px 100px;
}

.item h2 {
  justify-self: left;
  padding-left: 15px;
  width: 50%;
}

/* Trick 1 */

.item-1 .typing {
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* in style.css there is a typo for this class name and for 
  that reason the typing div doesn't have flex display. as a resutl
  it is shown correctly. using flexbox here breaks things*/
  height: 25px;
  width: 200px;
}

.item-1 .typing-effect {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid black;
  font-size: 2em;
  animation: typing 2s steps(35) infinite,
    border 0.27s step-end infinite alternate;
}

@keyframes typing {
  0% {
    width: 0ch;
  }
}

@keyframes border {
  50% {
    border-color: transparent;
  }
}

/* Trick 2 */

.item-2 .transparent-shadow {
  display: flex;
  align-items: start;
  justify-content: center;
}

.item-2 .two-column {
  display: flex;
  gap: 2em;
}

.item-2 .box-shadow {
  box-shadow: 2px 4px 8px #3723a1;
}

.item-2.drop-shadow {
  filter: drop-shadow(2px 4px 8px #3723a1);
}

.item-2 img {
  display: block;
  width: 50%;
  margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10 CSS Trick</title>
    <link rel="stylesheet" href="style2.css">
</head>

<body>
    <div class="container">
        <h1>10 Useful Css tricks</h1>

        <div class="wrapper">
            <div class="item item-1">
                <h2>01.typing effect</h2>
                <div class="typing">
                    <div class="typing-effect">
                        Typing effect for text
                    </div>
                </div>
            </div>
            <div class="item item-2">
                <h2>02.Shadow for transparent images</h2>
                <div class="transparent-shadow">
                    <div class="two-column">
                        <div class="">
                            <div class="margin-bottom align-center">Box Shadow</div>
                            <img src="https://s8.uupload.ir/files/google_bg0d.png" alt="" class="box-shadow">
                        </div>
                        <div class="">
                            <div class="margin-bottom align-center">Drop Shadow</div>
                            <img src="https://s8.uupload.ir/files/google_bg0d.png" alt="" class="drop-shadow">
                        </div>
                    </div>
                </div>
            </div>
            <div class="item item-3">
                <h2></h2>
                <div></div>
            </div>
            <div class="item item-4">
                <h2></h2>
                <div></div>
            </div>
            <div class="item item-5">
                <h2></h2>
                <div></div>
            </div>
            <div class="item item-6">
                <h2></h2>
                <div></div>
            </div>
            <div class="item item-7">
                <h2></h2>
                <div></div>
            </div>
            <div class="item item-8">
                <h2></h2>
                <div></div>
            </div>
        </div>
    </div>
</body>

</html>

现在我想让透明阴影 div 更大，以便我可以在其中插入更大的图像。因为它是一个网格项目，所以我尝试使用 

grid-row: span 2
。但问题是，上一个和下一个网格中的网格项也会受到影响并变大。

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  width: 100%;
}

body {
  font-family: monospace;
  background-color: aliceblue;
}

.container {
  width: 75vw;
  margin-inline: auto;
  background-color: antiquewhite;
}

.wrapper {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: auto;
  gap: 2em;
}

h1 {
  padding: 20px 10px;
}

h2 {
  text-align: left;
}

.margin-right {
  margin-right: 2em;
}

.margin-bottom {
  margin-bottom: 1em;
}

.align-center {
  text-align: center;
}

.item {
  display: grid;
  place-items: center;
  grid-auto-rows: 200px;
  grid-template-rows: 70px 100px;
}

.item h2 {
  justify-self: left;
  padding-left: 15px;
  width: 50%;
}


/* Trick 1 */

.item-1 .typing {
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* in style.css there is a typo for this class name and for 
  that reason the typing div doesn't have flex display. as a resutl
  it is shown correctly. using flexbox here breaks things*/
  height: 25px;
  width: 200px;
}

.item-1 .typing-effect {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid black;
  font-size: 2em;
  animation: typing 2s steps(35) infinite, border 0.27s step-end infinite alternate;
}

@keyframes typing {
  0% {
    width: 0ch;
  }
}

@keyframes border {
  50% {
    border-color: transparent;
  }
}


/* Trick 2 */

.item-2 .transparent-shadow {
  grid-row: span 2;
  display: flex;
  align-items: start;
  justify-content: center;
}

.item-2 .two-column {
  display: flex;
  gap: 2em;
}

.item-2 .box-shadow {
  box-shadow: 2px 4px 8px #3723a1;
}

.item-2.drop-shadow {
  filter: drop-shadow(2px 4px 8px #3723a1);
}

.item-2 img {
  display: block;
  width: 50%;
  margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10 CSS Trick</title>
  <link rel="stylesheet" href="style2.css">
</head>

<body>
  <div class="container">
    <h1>10 Useful Css tricks</h1>

    <div class="wrapper">
      <div class="item item-1">
        <h2>01.typing effect</h2>
        <div class="typing">
          <div class="typing-effect">
            Typing effect for text
          </div>
        </div>
      </div>
      <div class="item item-2">
        <h2>02.Shadow for transparent images</h2>
        <div class="transparent-shadow">
          <div class="two-column">
            <div class="">
              <div class="margin-bottom align-center">Box Shadow</div>
              <img src="https://s8.uupload.ir/files/google_bg0d.png" alt="" class="box-shadow">
            </div>
            <div class="">
              <div class="margin-bottom align-center">Drop Shadow</div>
              <img src="https://s8.uupload.ir/files/google_bg0d.png" alt="" class="drop-shadow">
            </div>
          </div>
        </div>
      </div>
      <div class="item item-3">
        <h2></h2>
        <div></div>
      </div>
      <div class="item item-4">
        <h2></h2>
        <div></div>
      </div>
      <div class="item item-5">
        <h2></h2>
        <div></div>
      </div>
      <div class="item item-6">
        <h2></h2>
        <div></div>
      </div>
      <div class="item item-7">
        <h2></h2>
        <div></div>
      </div>
      <div class="item item-8">
        <h2></h2>
        <div></div>
      </div>
    </div>
  </div>
</body>

</html>

正如您在下图中可以清楚看到的，网格不相关但受到影响。 是什么导致了这个问题？我该如何解决这个问题？ enter image description here

另请注意，第一个项目的第二个子项（打字效果）位于其父网格的第二行，但第二个项目的第二个子项（框阴影和投影）位于第三行。

html css css-grid
1个回答
0
投票

我认为您正在不属于网格的元素上使用网格行声明。如果你把它放在 

.item-2
上，并分别对 
.item-2 .transparent-shadow
做任何你想做的事情，它应该只跨越你想要的两行，比如：

.item-2 {
    grid-row: span 2;
}

.transparent-shadow {
  display: flex;
  align-items: start;
  justify-content: center;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.