The following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
.a-block {
background-color: #000066;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
padding: 10px;
gap:10px;
}
.a-block > div {
background-color: #FF0000;
border: 1px solid rgba(255, 255, 255, 0.8);
padding: 50px;
gap: 10px;
}
.c_title {
display:grid;
grid-area: 1 / 1 / 2 / 2
font-size: 2em;
text-align: left;
background-color: #FF0000;
gap: 10px;
}
.c_body {
display:grid;
grid-area: 2 / 1 / 3 / 2
font-size: 1.5em;
text-align: justify;
font-size: calc(1.5em + (1vw - 0.5em)); /* adapt font-size based on screen size */
min-font-size: 0.8em; /* minimum font-size */
background-color: #0000FF;
gap: 10px;
}
.p_img {
display:grid;
grid-area: 1 / 2 / 3 / 3
background-color: #FF0000;
gap: 10px;
}
.p_img > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
}
</style>
</head>
<body>
<div class="a-block" >
<div class="c_title">title</div>
<div class="c_body">
Lorem ipsum dolor sit
</div>
<div class="p_img" >
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" >
</div>
</div>
<p></p>
</body>
</html>
Yields this result
Both divs I expect to be stacked over each other in the first column are on the first line. The image I expect to be in the second column and spawning both rows is the second row and first line
Looking at Chrome's inspector I can see my grid layout information is somehow ignored, but I did not find how to fix it
I tried many variations on grid layout and properties, but it keeps being ignored.
.a-block { background-color: #000066; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); padding: 10px; gap:10px; }.a-block > div { background-color: #FF0000; border: 1px solid rgba(255, 255, 255, 0.8); padding: 50px; gap: 10px; }.c_title { font-size: 2em; text-align: left; background-color: #FF0000; gap: 10px; }.c_body { font-size: 1.5em; text-align: justify; font-size: calc(1.5em + (1vw - 0.5em)); /* adapt font-size based on screen size */ min-font-size: 0.8em; /* minimum font-size */ background-color: #0000FF; gap: 10px; }.p_img { grid-area: 1 / 2 / span 2 / 2; background-color: #FF0000; gap: 10px; }.p_img > img { object-fit: cover; width: 100%; max-height: 100%; }
<div class="a-block" > <div class="c_title">title</div> <div class="c_body"> Lorem ipsum dolor sit </div> <div class="p_img" > <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" > </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.