I have the following code which works fine.
*,
*::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>Now I want to make the transparent-shadow div bigger so that I could insert bigger images in there. Since it’s a grid item I try using grid-row: span 2. but the problem is that the grid items in the previous and next grids are also affected and get bigger.
*,
*::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>as you can well see in the image below the grids are not related but affected.
What’s causing this problem? and how can I solve it?
also note that the first item’s second child (typing effect) is in the second row of its parent grid but the second item’s second child (box shadow and drop shadow) is in the third row.
I think you’re using the grid-row declaration on an element that’s not part of the grid. If you put it just on .item-2 and do whatever you want to do to .item-2 .transparent-shadow separately, it should span only the two rows that you want, something like:
.item-2 {
grid-row: span 2;
}
.transparent-shadow {
display: flex;
align-items: start;
justify-content: center;
}