So I've been trying to put an image inside a grid but its causing me problems.
Right now, my biggest issue is that is pushing another grid item down.
body {
padding: 0;
margin: 0;
}
.main {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-bar {
grid-row: 1/16;
grid-column: 4/21;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-info {
grid-column: 1/21;
grid-row: 1/21;
background: #333;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.header-title {
grid-column: 3;
grid-row: 2/8;
background: #000;
}
.business {
grid-column: 17;
}
.side-bar {
background: #fff;
grid-row: 1/21;
grid-column: 1/4;
display: grid;
grid-template-rows: repeat(10, 1fr);
border-right: 1px solid #0F6B99;
}
.side-bar img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
}
.home-button {
padding: 20px;
text-align: center;
background: #0F6B99;
grid-row: 3/4;
}
.buy-button {
padding: 20px;
text-align: center;
background: #59B3B3;
grid-row: 4/5;
}
.sell-button {
padding: 20px;
text-align: center;
background: #8FCCB8;
grid-row: 5/6;
}
.rent-button {
padding: 20px;
text-align: center;
background: #B8E6B8;
grid-row: 6/7;
}
.article1 {
background: #e6174b;
grid-row: 16/21;
grid-column: 4/11;
}
.article2 {
background: #8FCCB8;
grid-row: 16/21;
grid-column: 11/18;
}
.article3 {
background: #B8E6B8;
grid-row: 16/21;
grid-column: 18/21;
}
<div class="main">
<div class="main-bar">
<div class="main-info">
<img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
<div class="header-title">High Quality Realstate Asistance</div>
</div>
</div>
<div class="side-bar">
<!--<img src="img/logo.png" alt="">-->
<div class="home-button">
Home
</div>
<div class="buy-button">
Buy
</div>
<div class="sell-button">
Sell
</div>
<div class="rent-button">
Rent
</div>
</div>
<div class="article1">
</div>
<div class="article2">
</div>
<div class="article3">
</div>
</div>
The image in question has a class as business and the item is pushing down has a class as header-title. Header-title should be inside main-info, but when 'business' appears, it pushes header-title down!
!
The issue here is that your image with the business class is overflowing its own grid and the grid of its container.
In order to resolve this add the property overflow: hidden to both the .main-info class and the .business class.
These classes also need the "display: grid" property so the browser can process the grid-column and grid-row property accordingly for those two classes.
Once those additions are made you can tweak the grid-row and grid-column for the the .business class and the .header-title classes accordingly to find your desired positions.
Full CSS and HTML Below:
body {
padding: 0;
margin: 0;
}
.main {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-bar {
grid-row: 1/16;
grid-column: 4/21;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-info {
grid-column: 1/21;
grid-row: 1/21;
background: #333;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
overflow: hidden;
}
.header-title {
grid-column: 3;
grid-row: 2/8;
background: #000;
display: grid;
}
.business {
grid-column: 17;
overflow: hidden;
display: grid;
}
.side-bar {
background: #fff;
grid-row: 1/21;
grid-column: 1/4;
display: grid;
grid-template-rows: repeat(10, 1fr);
border-right: 1px solid #0F6B99;
}
.side-bar img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
}
.home-button {
padding: 20px;
text-align: center;
background: #0F6B99;
grid-row: 3/4;
}
.buy-button {
padding: 20px;
text-align: center;
background: #59B3B3;
grid-row: 4/5;
}
.sell-button {
padding: 20px;
text-align: center;
background: #8FCCB8;
grid-row: 5/6;
}
.rent-button {
padding: 20px;
text-align: center;
background: #B8E6B8;
grid-row: 6/7;
}
.article1 {
background: #e6174b;
grid-row: 16/21;
grid-column: 4/11;
}
.article2 {
background: #8FCCB8;
grid-row: 16/21;
grid-column: 11/18;
}
.article3 {
background: #B8E6B8;
grid-row: 16/21;
grid-column: 18/21;
}
<div class="main">
<div class="main-bar">
<div class="main-info">
<img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
<div class="header-title">High Quality Realstate Asistance</div>
</div>
</div>
<div class="side-bar">
<!--<img src="img/logo.png" alt="">-->
<div class="home-button">
Home
</div>
<div class="buy-button">
Buy
</div>
<div class="sell-button">
Sell
</div>
<div class="rent-button">
Rent
</div>
</div>
<div class="article1">
</div>
<div class="article2">
</div>
<div class="article3">
</div>
</div>
Related
I'm trying to make an "example page" of all the layouts (so one under the other) How do I place a grid wrapper under a flex container and not be shown in the same line? if I remove the display: flex it automatically goes under but flex remains in the same line.
And why do they both have the same salmon background color?
Thanks.
.flex-wrapper {
display: flex;
border: 5px solid rgb(0, 0, 0);
}
.flex-wrapper>div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid */
.grid-wrapper {
display: grid;
border: 5px solid purple;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.grid-wrapper>div {
padding: 20px;
margin: 5px;
border-radius: 5px;
background-color: aquamarine;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<h1>Flexbox Layout</h1>
<div class="flex-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<!--Grid-->
<div class="grid-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
</div>
Just wrap the boxes of box in a container and put the add a flex-direction to column property in your flex-wrapper css class selector
.flex-wrapper {
display: flex;
flex-direction: column;
border: 5px solid rgb(0, 0, 0);
}
.flex-wrapper .box-container > div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid */
.grid-wrapper {
display: grid;
border: 5px solid purple;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.grid-wrapper>div {
padding: 20px;
margin: 5px;
border-radius: 5px;
background-color: aquamarine;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<h1>Flexbox Layout</h1>
<div class="flex-wrapper">
<div class="box-container">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
<!--Grid-->
<div class="grid-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
</div>
why do they both have the same salmon background color?
Because .flex-wrapper > div applies to every div that's an immediate child of flex-wrapper.
How do I place a grid wrapper under a flex container and not be shown in the same line?
You could add a flex-wrap rule to your flex-wrapper and set the grid item to be wide enough to wrap, as in the example below, but you might consider whether your outer container should be a grid instead of flex. You'd have more control that way.
.flex-wrapper {
display: flex;
border: 5px solid rgb(0, 0, 0);
flex-wrap: wrap; /* <=== */
}
.flex-wrapper>div {
padding: 20px;
margin: 5px;
background-color: salmon;
}
/* grid */
.grid-wrapper {
display: grid;
border: 5px solid purple;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
flex: 1 1 100%; /* <=== */
}
.grid-wrapper>div {
padding: 20px;
margin: 5px;
border-radius: 5px;
background-color: aquamarine;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<h1>Flexbox Layout</h1>
<div class="flex-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<!--Grid-->
<div class="grid-wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
</div>
This might very well be the stupidest question but why is the border radius of items changing when you zoom the viewport by Ctrl + mousewheel or through browser zoom? (To test it, run the code snippet below and open it in full page, then zoom in and out) The border radius is set in pixels, so why is it changing? Also, I always have to use flex layout to center text vertically inside a container, is there a better way to vertically a text? Setting display: inline-block and vertical-align: middle is not working.
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: 12px;
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</div>
I think, you want only the text to be zoomed and the border radius to look the same. Therefor you could use a screen dependent value like vw or vh. For example:
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
Working example:
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</div>
I have a CSS Grid layout in which I specified the starting/ending rows and columns for each div as you can see below with the CSS
.grid-container {
width: 100%;
height: 100%;
display: grid;
grid-gap: 0;
}
.grid-item {
position: relative;
display: flex;
padding: 0;
border-radius: 10px;
margin: 10px;
background-color: #f6f6f6;
}
.g-1 {
margin-top: 20px;
margin-left: 20px;
background-color: white;
grid-column: 1/10;
grid-row: 1/2;
}
.g-2 {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
grid-column: 10/14;
grid-row: 1/40;
}
.g-3 {
margin-left: 20px;
background-color: #eaf0ff;
grid-column: 1/4;
grid-row: 2/12;
}
.g-4 {
background-color: #ebe3ff;
grid-column: 4/7;
grid-row: 2/12;
}
.g-5 {
background-color: #dff6db;
grid-column: 7/10;
grid-row: 2/12;
}
.g-6 {
margin-left: 20px;
margin-bottom: 20px;
grid-column: 1/5;
grid-row: 12/40;
}
.g-7 {
grid-column: 5/10;
grid-row: 12/28;
}
.g-8 {
margin-bottom: 20px;
grid-column: 5/10;
grid-row: 28/40;
}
which results in this
However, when I then add a simple h1 inside of the blue container .g-3 it expands both vertically and horizontally despite being told that its columns and rows are set to 1/4 and 2/12 respectively.
<div className="view">
<div className="grid-container">
<div className="grid-item g-1">
<h1 className="header">Hello, Levi</h1>
</div>
<div className="grid-item g-2"></div>
<div className="grid-item g-3">
<h2>Testing Size</h2>
</div>
<div className="grid-item g-4"></div>
<div className="grid-item g-5"></div>
<div className="grid-item g-6"></div>
<div className="grid-item g-7"></div>
<div className="grid-item g-8"></div>
</div>
</div>
How can I prevent the contents of the grid items from expanding them from their original layout as seen in the first screenshot, especially when considering there is still plenty of room for the text?
you didn't define any sizing for your columns so the content will define this and you will have a different layout each time you update the content.
You need to define an explicit size for the columns:
.grid-container {
height: 100vh;
min-height:600px;
display: grid;
grid-gap: 0;
grid-auto-columns:1fr; /* this should do the job and force all the columns to be equal */
/* you can also try minmax(0,1fr) (related: https://stackoverflow.com/a/52861514/8620333) */
}
.grid-item {
position: relative;
display: flex;
padding: 0;
border-radius: 10px;
margin: 10px;
background-color: #f6f6f6;
}
.g-1 {
margin-top: 20px;
margin-left: 20px;
background-color: white;
grid-column: 1/10;
grid-row: 1/2;
}
.g-2 {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
grid-column: 10/14;
grid-row: 1/40;
}
.g-3 {
margin-left: 20px;
background-color: #eaf0ff;
grid-column: 1/4;
grid-row: 2/12;
}
.g-4 {
background-color: #ebe3ff;
grid-column: 4/7;
grid-row: 2/12;
}
.g-5 {
background-color: #dff6db;
grid-column: 7/10;
grid-row: 2/12;
}
.g-6 {
margin-left: 20px;
margin-bottom: 20px;
grid-column: 1/5;
grid-row: 12/40;
}
.g-7 {
grid-column: 5/10;
grid-row: 12/28;
}
.g-8 {
margin-bottom: 20px;
grid-column: 5/10;
grid-row: 28/40;
}
<div class="grid-container">
<div class="grid-item g-1">
<h1 class="header">Hello, Levi</h1>
</div>
<div class="grid-item g-2"></div>
<div class="grid-item g-3">
<h2>Testing Size</h2>
</div>
<div class="grid-item g-4"></div>
<div class="grid-item g-5"></div>
<div class="grid-item g-6"></div>
<div class="grid-item g-7"></div>
<div class="grid-item g-8"></div>
</div>
I am unable to align text in the center of the grid, both vertical and horizontally, because nothing that I tried seems to work, so I wanted to know what is the problem with my code or how should I do it.
I tried using justify-items: center, align-items: center and even place-items: center center;
This is a my full, hopefully, you can give it a try and see what is wrong with it.
<title> Learning Grid </title>
<style>
body {
color: #fff;
font-family: sans-serif;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
}
#content > * {
padding: 30px;
font-size: 30px;
}
header {
grid-column: 1/13;
text-align: center;
background-color: hotpink;
}
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
}
aside {
grid-column: 1/4;
grid-row: 2/3;
background-color: cadetblue;
}
nav {
grid-column: 1/4;
grid-row: 3/4;
text-align: center;
font-size: 30px;
background-color: aquamarine;
}
section {
grid-column: 1/13;
grid-row: 4/6;
background-color: coral;
}
footer {
grid-column: 1/13;
grid-row: 6/7;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="content">
<header> Header </header>
<main> Main </main>
<section>Section </section>
<aside>Aside </aside>
<nav> Nav </nav>
<footer> Footer</footer>
</div>
</body>
To align the text, you could use the line-height approach, but that is not very responsive.
Since you already have the grid layout, you can keep that same idea and add a helper element, like a <span>. Doing that, give you more options to alight the actual text.
Here is an example of how your new HTML would look like:
<main>
<span>Main</span>
</main>
And the CSS for that would be:
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
display: grid;
}
main > * {
margin: auto;
}
For aligning text to center just use this property: display: flex; align-items: center; justify-content: center;
body {
color: #fff;
font-family: sans-serif;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
}
#content > * {
padding: 30px;
font-size: 30px;
}
header {
grid-column: 1/13;
text-align: center;
background-color: hotpink;
}
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
display: flex;
align-items: center;
justify-content: center;
}
aside {
grid-column: 1/4;
grid-row: 2/3;
background-color: cadetblue;
}
nav {
grid-column: 1/4;
grid-row: 3/4;
text-align: center;
font-size: 30px;
background-color: aquamarine;
}
section {
grid-column: 1/13;
grid-row: 4/6;
background-color: coral;
display: flex;
align-items: center;
justify-content: center;
}
footer {
grid-column: 1/13;
grid-row: 6/7;
background-color: cornflowerblue;
}
<div id="content">
<header> Header </header>
<main> Main </main>
<section>Section </section>
<aside>Aside </aside>
<nav> Nav </nav>
<footer> Footer</footer>
</div>
You can use Bootstrap classes for example :
<main class="text-center justify-content-center align-items-center"> Main </main>
Or aligning text over CSS
main {
display: flex;
justify-content: center;
align-items: center;
}
How can I prevent the footer row from overlapping the content row?
This is what I'm getting:
body {
display: grid;
grid-template-rows: 3.7rem auto auto;
grid-template-columns: 3rem 3fr 2fr;
}
*[role="banner"] {
grid-row: 1;
grid-column: 2/4;
background-color: green;
height: 3rem;
}
*[role="main"] {
grid-row: 2;
grid-column: 2;
background-color: yellow;
height: 100px;
}
*[role="contentinfo"] {
grid-row: 3;
grid-column: 2/3;
border-top: 1px solid black;
}
*[role="contentinfo"] img {
height: 100px;
}
<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><img src="https://s14-eu5.ixquick.com/cgi-bin/serveimage?url=https%3A%2F%2Fdata.motor-talk.de%2Fdata%2Fgalleries%2F0%2F147%2F9424%2F43109894%2Fbild--7008737403287221413.jpg&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>
The footer (row 3) is overlapping the article (row 2) because you have a fixed height on the article:
[role="main"] { height: 100px; }
The overrides the auto height you have specified on the grid container with:
grid-template-rows: 3.7rem auto auto
Once you remove the height rule, the overlap is gone.
body {
display: grid;
grid-template-rows: 3.7rem auto auto;
grid-template-columns: 3rem 3fr 2fr;
}
*[role="banner"] {
grid-row: 1;
grid-column: 2/4;
background-color: green;
height: 3rem;
}
*[role="main"] {
grid-row: 2;
grid-column: 2;
background-color: yellow;
/* height: 100px; <-------- REMOVE */
}
*[role="contentinfo"] {
grid-row: 3;
grid-column: 2/3;
border-top: 1px solid black;
}
*[role="contentinfo"] img {
height: 100px;
}
<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><img src="https://s14-eu5.ixquick.com/cgi-bin/serveimage?url=https%3A%2F%2Fdata.motor-talk.de%2Fdata%2Fgalleries%2F0%2F147%2F9424%2F43109894%2Fbild--7008737403287221413.jpg&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>