I'm trying to set my grid layout as follows:
Is it even possible? The issue I'm having is when the content in item #3 is getting bigger it expands item #2 and pushes it down. Is there any way to avoid such behavior when content is large at item #3?
.container {
display: grid;
grid-template-columns: 200px 200px;
height: 400px;
width: 400px;
background-color: teal;
}
.grid-element {
display: grid;
place-items: center;
border: 1px solid tomato;
background-color: wheat;
font-size: 24px;
}
<div class='container'>
<div class='grid-element'>1</div>
<div class='grid-element'>2</div>
<div class='grid-element'>3</div>
</div>
example code for responsive grid with css.repeat(auto-fit, minmax(100px, 1fr)); and overflow-wrap: break-word; added for fit content.
<style>
.item1 {
grid-area: area1;
}
.item2 {
grid-area: area2;
}
.item3 {
grid-area: area3;
}
.grid-container {
display: grid;
grid-template-areas: 'area1 area1 area1 area2 area2'
'area1 area1 area1 area2 area2'
'area1 area1 area1 area3 area3'
'area1 area1 area1 area3 area3';
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
background-color: #2196F3;
padding: 10px;
overflow-wrap: break-word;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
<div class="grid-container">
<div class="item1">3</div>
<div class="item2">2</div>
<div class="item3">1</div>
</div>
I'm not sure whether I have understood your question correctly or not, but I hope the following snippet could be helpful:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 200px;
height: 200px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas: "d1 d3" "d2 d3";
}
.container>div:nth-child(1) {
grid-area: d1;
}
.container>div:nth-child(2) {
grid-area: d2;
}
.container>div:nth-child(3) {
grid-area: d3;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div style="background-color: blue;">item1</div>
<div style="background-color: yellow;">item2</div>
<div style="background-color: orangered;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum facere facilis reprehenderit corporis, iure dolorum harum suscipit ratione fuga iste rem laboriosam aut perspiciatis libero nostrum praesentium? Quae, illum sed?</div>
</div>
</body>
</html>
Related
When I proceed to add elements like images, or more words in the lorem ipsum generator, it seems like some space is created. I have not had any luck finding it in the inspect mode. Also occurs when adding an image. But the example shown occurs when using for example the lorem ipsum generator, creating 100 words, and suddenly there spawns space all over the place.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
grid-area: 1 / 1 / 2 / 6;
display: flex;
justify-content: center;
background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
height: fit-content;
padding: 25px 0;
border-bottom: solid white 2px;
}
.menu {
grid-area: 2 / 1 / 3 / 6;
background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
height: fit-content;
padding: 20px 0;
}
ul {
list-style-type: none;
text-decoration: none;
width: 100%;
text-align: center;
}
.menu li {
padding-left: 30px;
padding-right: 30px;
}
li {
display: inline;
}
ul li a {
color: white;
text-decoration: none;
font-size: 24px;
}
ul li a:hover {
text-decoration: underline;
}
.side {
grid-area: 3 / 1 / 5 / 2;
}
.main {
grid-area: 3 / 2 / 5 / 6;
float: left;
display: flex;
justify-content: left;
}
.side,
.main {
padding: 10px;
}
.footer {
grid-area: 5 / 1 / 6 / 6;
display: flex;
justify-content: center;
}
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
<div class="grid-container">
<div class="header">Øving 1</div>
<div class="menu">
<ul>
<li>Hjem</li>
<li>Om oss</li>
<li>Kontakt</li>
<li>Bestill</li>
</ul>
</div>
<div class="side">
<h3>Side</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error suscipit nesciunt quos porro ex dignissimos unde officia. Similique, molestiae cum ullam quam placeat quisquam sunt ratione suscipit officiis, soluta dolorem.</p>
</div>
<div class="main">
<div class="p">
<h3>Content</h3>
<p>test</p>
</div>
<div class="img">
</div>
</div>
<div class="footer">
<h2>Copyright © Erik Skjellevik 2022</h2>
</div>
</div>
You must change that in CSS file:
//OLD
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
//NEW
.grid-container {
display: grid;
}
According to my knowledge the space creation is by default property of the software so because of this your website create extra space. But to solve this problem you can use margin and padding = 0 after that no space will be created
in your website
The extra space is by default property. For fixing it, set the margin and padding to 0.
OR
For different resolutions, use media queries and for different pixels, you have to set it.
I've got a grid layout with 2 columns and 3 rows.
I want to be able to resize the column widths. I know I can use resize: horizontal but that only changes width for one row.
I'm thinking I can't do what I want and I'll need to use nested grids but I'm not sure so I wanted to check.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"logo search"
"nav main"
"log main";
}
.logo {
grid-area: logo;
}
.search {
grid-area: search;
}
.nav {
grid-area: nav;
overflow: auto;
resize: horizontal;
}
.log {
grid-area: log;
overflow: auto;
resize: horizontal;
}
.main {
grid-area: main;
}
html,
body,
.container {
height: 100%;
margin: 0;
}
/* For presentation only, no need to copy the code below */
.container * {
border: 1px solid red;
position: relative;
}
.container *:after {
content: attr(class);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="logo"></div>
<div class="search"></div>
<div class="nav">
</div>
<div class="log"></div>
<div class="main"></div>
</div>
</body>
</html>
You can do it with your structure. The trick is to use auto 1fr on the template columns and set the initial width of the resizable element to be equal to 50vw to simulate the 1fr 1fr initially:
PS: I simplified the code by removing the areas but that's not part of the trick, you can keep it
.container {
display: grid;
height: 100vh;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.log {
overflow: auto;
resize: horizontal;
width:50vw;
}
.main {
grid-row:2/span 2;
grid-column:2;
}
body{
margin: 0;
}
/* For presentation only, no need to copy the code below */
.container * {
border: 1px solid red;
position: relative;
}
.container *:after {
content: attr(class);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="logo"></div>
<div class="search"></div>
<div class="nav">
</div>
<div class="log"></div>
<div class="main"></div>
</div>
If you will have content, you can do it like below:
.container {
display: grid;
height: 100vh;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.log {
overflow: auto;
resize: horizontal;
width:50vw;
}
/* disable the width contribution so only the log will define the width */
.logo,
.nav {
width:0;
min-width:100%;
}
/**/
.main {
grid-row:2/span 2;
grid-column:2;
}
body{
margin: 0;
}
/* For presentation only, no need to copy the code below */
.container * {
border: 1px solid red;
position: relative;
}
<div class="container">
<div class="logo"> Lorem ipsum dolor sit amet, consectetur .</div>
<div class="search"> </div>
<div class="nav">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="log"> </div>
<div class="main"></div>
</div>
The website is designed to have 6 big squares, 3 per row, in a grid layout.
I am trying to make it responsive, so if someone zooms the website would adapt... and it kind of does, but in a bad way.
I want the squares to lay different when zooming; If now they are 3 per row I want them to go 2 per row and finally 1 per row if zooming enough. Instead of that the squares narrow themselves in their width in order to fit.
/*///////////GENERAL//////////*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/*///////////HEADER//////////*/
header {
text-align: center;
padding: 10px;
margin-bottom: 20px;
border-bottom: 1px solid black;
}
#HeaderContainer {
max-width: 1334px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(1, 1fr 2fr 1fr);
grid-auto-rows: minmax(20px, auto);
}
header > div > p {
padding: 15px;
font-size: 20px;
font-weight: lighter;
font-family: Helvetica, Arial, Sans-serif;
grid-column: 2/3;
max-width: 980px;
}
/*///////////MAINSECTION//////////*/
#MainSectionContainer {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
background: white;
}
section {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(150px, auto);
gap: 10px;
}
.SectionBox {
min-width: 324px, auto;
display: grid;
align-content: center;
justify-content: center;
border-radius: 30px;
border: 2px solid black;
font-family: Helvetica, Arial, Sans-serif;
}
#photo {
grid-row: 1/3;
}
#web {
grid-row: 1/3;
}
#coding {
grid-row: 1/3;
}
#cv {
grid-row: 3/5;
}
#about {
grid-row: 3/5;
}
#contact {
grid-row: 3/5;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="MyPortfolio" content="MyPortfolio" />
<link rel="stylesheet" href="StylesMainPage.css" />
</head>
<body>
<header>
<div id="HeaderContainer">
<p>WELCOME TO MY PORTFOLIO</p>
</div>
</header>
<div id="MainSectionContainer">
<section>
<p id="photo" class="SectionBox">PHOTOGRAPHY</p>
<p id="web" class="SectionBox">WEB DESIGN</p>
<p id="coding" class="SectionBox">CODING</p>
<p id="cv" class="SectionBox">CURRICULUM VITAE</p>
<p id="about" class="SectionBox">ABOUT ME</p>
<p id="contact" class="SectionBox">CONTACT</p>
</section>
</div>
</body>
</html>
You might need auto-fit and auto-flow
Possible example below,
or https://codepen.io/gc-nomade/pen/mdeYpWK with a max numbers of columns set to 3
/*///////////GENERAL//////////*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box ;
}
/*///////////HEADER//////////*/
header{
text-align: center;
padding: 10px;
margin-bottom: 20px;
border-bottom:1px solid black;
}
#HeaderContainer{
max-width: 1334px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(1, 1fr 2fr 1fr);
grid-auto-rows: minmax(20px, auto);
}
header > div > p {
padding: 15px;
font-size: 20px;
font-weight: lighter;
font-family: Helvetica, Arial, Sans-serif;
grid-column: 2/3;
max-width: 980px;
}
/*///////////MAINSECTION//////////*/
#MainSectionContainer{
margin-left: auto;
margin-right: auto;
max-width: 1000px;
background: white;
}
section{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
grid-auto-rows: minmax(150px, auto);
gap: 10px;
}
.SectionBox{
min-width: 324px, auto;
display: grid;
align-content: center;
justify-content: center;
border-radius: 30px;
border: 2px solid black;
font-family: Helvetica, Arial, Sans-serif;
}
#photo{
}
#web{
}
#coding{
}
#cv{
}
#about{
}
#contact{
}
/* ///////// IE11 alternative ////////////////////////*/
section{
display: -ms-grid;
-ms-grid-columns:1fr 10px 1fr 10px 1fr;
-ms-grid-rows: auto 10px auto;
}
.SectionBox{
min-height:150px;
display: -ms-flexbox;
flex-direction:column;
align-items:center;
}
#photo{
-ms-grid-row: 1;
-ms-grid-column: 1;
}
#web{
-ms-grid-row: 1;
-ms-grid-column: 3;
}
#coding{
-ms-grid-row: 1;
-ms-grid-column: 5;
}
#cv{
-ms-grid-row: 3;
-ms-grid-column: 1;
}
#about{
-ms-grid-row: 3;
-ms-grid-column: 3;
}
#contact{
-ms-grid-row: 3;
-ms-grid-column: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="MyPortfolio" content="MyPortfolio">
<link rel="stylesheet" href="StylesMainPage.css">
</head>
<body>
<header>
<div id="HeaderContainer">
<p>WELCOME TO MY PORTFOLIO</p>
</div>
</header>
<div id="MainSectionContainer">
<section>
<p id="photo" class="SectionBox">PHOTOGRAPHY</p>
<p id="web" class="SectionBox">WEB DESIGN</p>
<p id="coding" class="SectionBox">CODING</p>
<p id="cv" class="SectionBox">CURRICULUM VITAE</p>
<p id="about" class="SectionBox">ABOUT ME</p>
<p id="contact" class="SectionBox">CONTACT</p>
</section>
</div>
</body>
</html>
jsbin for IE11 testing : https://jsbin.com/sifozaduso/1/edit?css,output
I'm fairly new to web design but have been trying to get a baseball research website up which has finally brought me around to code. I put in the CSS grid layout to some success but have had a persistent bug with my nested item or main content on my "Home" Page. It keeps coming up or looming large with other tasks on the site and needs to be corrected. These boards are great and I'd appreciate any help. Thank you. Here's the issue and code:
I have a responsive layout that uses media queries for 3 different screen sizes >700px, <500px and <700 px. In my main center column, there is the 2x2 "content" div which has 4 grid areas within it. The issue is, the bottom row of nested divs does not extend to the bottom of the parent div, which is exasperated when divs get to certain heights.
In the attached picture, you can see the border of the larger "content" div in black with the nested semi-transparent white nested divs stopping well before the black border. Margin-bottom has been set to 0 in about any css class I can think of. Code attached as well, but I'm also new at the intensive code post here so don't know the best way to do it :) Loving coding so far. Thanks all!
* {
box-sizing: border-box;
}
.wrapper {
background-image: url(oceanfull.PNG);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
max-width: 100%;
margin: 0;
font: 1.2em Helvetica, arial, sans-serif;
height: 100%;
}
.wrapper>* {
border: 2px solid black;
background-color: rgba(255, 255, 255, .7);
border-radius: 5px;
padding: 0px;
}
.wrapper h1 {
font-size: 30px;
text-align: center;
padding: 0px;
}
a:hover {
text-decoration: underline;
background-color: rgb(28, 224, 238);
}
.main-head {
grid-area: header;
background-image: url(ray.png);
display: grid;
grid-auto-rows: minmax(100px, auto);
height: 15vh;
grid-template-columns: 1fr 4fr 1fr;
gap: 0px;
padding: 0px;
grid-template-areas: "leftop centertop righttop";
}
.main-head h1 {
margin-top: 50px;
margin-bottom: 0px;
background-color: blue;
border: solid black;
}
.leftop {
grid-area: leftop;
border: solid green;
}
.lefttop img {
height: 40%;
width: 100%;
position: relative;
top: 60%;
right: 10%;
}
.centertop {
grid-area: centertop;
display: flex;
flex-direction: row;
margin: auto;
position: relative;
top: -50%;
}
.righttop {
grid-area: righttop;
}
.righttop img {
height: 60%;
width: 100%;
position: relative;
top: 40%;
}
.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
height: 100%;
padding: 0px;
grid-template-areas: "one one" "three four";
padding-bottom: 0px;
background-color: rgba(255, 255, 255, 0.0);
border: solid black;
}
.wrapper article div {
height: 100%;
border: 1px solid black;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 12px;
}
.one {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.one img {
border-radius: 12px;
float: right;
clear: right;
}
.three {
grid-area: three;
height: 100%;
}
.three h4 {
margin-bottom: 1vh;
margin-top: 1vh;
}
.three ul {
list-style-type: auto;
padding-left: 20px;
padding-right: 5px;
}
.three ul li {
padding-bottom: 15px;
}
.four {
grid-area: four;
height: 100%;
}
.main-nav {
grid-area: nav;
}
.main-nav ul {
font-size: 24px;
list-style-type: none;
margin: 0;
padding: 0;
}
.main-nav ul li {
padding-bottom: 0vh;
}
nav ul {
margin: 0;
padding: 0;
}
.side {
grid-area: sidebar;
font-size: 2.5vh;
}
.side p {
margin-bottom: 0px;
padding-left: 4px;
}
.ad {
grid-area: ad;
padding: 0px;
}
.main-footer {
grid-area: footer;
padding: 0px;
}
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer";
}
#media (min-width: 500px) {
.wrapper {
grid-template-columns: 1.5fr 4.5fr;
grid-template-areas: "header header" "nav nav" "sidebar content" "ad content" "footer footer";
}
nav ul {
display: flex;
justify-content: space-between;
}
}
#media (min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "header header header" "nav content sidebar" "nav content ad" "footer footer footer";
}
nav ul {
flex-direction: column;
}
.main-nav ul li {
padding-bottom: 5vh;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BBsite</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="wrapper">
<header class="main-head">
<div class="lefttop">
</div>
<div class="centertop">
<h1>The Site</h1>
</div>
<div class="righttop">
</div>
</header>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>Lineup</li>
<li>Articles</li>
</ul>
</nav>
<article class="content">
<div class="one">
<img src="morsecrazy.jpg" alt="morsecrazy">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, nemo minus ad nisi debitis a in aliquam reiciendis iure libero vero totam laboriosam quidem, animi esse, itaque doloribus dolore culpa doloremque. Maxime soluta laboriosam commodi,
itaque facilis qui doloremque aliquid non quisquam placeat eveniet ipsum fugiat voluptates culpa ad dolor?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi adipisci ipsam facere veritatis fugit error ab fugiat! Ea, illum laudantium?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi adipisci ipsam facere veritatis fugit error ab fugiat! Ea, illum laudantium?</p>
</div>
<div class="three">
<h4>The Old Recent Research/Articles/Charts</h4>
<ul>
<li>Data Thing</li>
<li>You Won't Believe Thing</li>
<li>Article Thing</li>
<li>Thing Another</li>
<li>Thing</li>
</ul>
</div>
<div class="four">4</div>
</article>
<aside class="side">
<h2>Lineup</h2>
<p>C - Guy Catcher</p>
<p>1B - First Basemanman</p>
<p>2B - Double Base</p>
<p>3B - 3B</p>
<p>SS - The Shortstop</p>
<p>LF - Left the what?</p>
<p>CF - Rover</p>
<p>RF - Bobby Abreu</p>
<p>DH - DH</p>
</aside>
<div class="ad">
<p>ad</p>
</div>
<footer class="main-footer">The footer</footer>
</div>
HTML:
<article class="content">
<div class="one">
<img src="morsecrazy.jpg" alt="morsecrazy">
<p>Loremssss<p>
</div>
<div class="three">
<h4>The Old Recent Research/Articles/Charts</h4>
<ul>
<li>Data Thing</li>
<li>You Won't Believe Thing</li>
<li>Article Thing</li>
<li>Thing Another</li>
<li>Thing</li>
</ul>
</div>
<div class="four">4</div>
</article>
CSS:
.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
padding: 0px;
grid-template-areas:
"one one"
"three four";
padding-bottom: 0px;
background-color: rgba(255, 255, 255, .0);
border: solid black;}
.one {
grid-area: one;
word-wrap: break-word;
padding-left: 8px;
padding-top: 8px;
height: 100%;
}
.one img {
border-radius: 12px;
float: right;
clear: right;
}
.three {
grid-area: three;
}
.three h4 {
margin-bottom: 1vh;
margin-top: 1vh;
}
.three ul {
list-style-type: auto;
padding-left: 20px;
padding-right: 5px;
}
.three ul li {
padding-bottom: 15px;
}
.four {
grid-area: four;
}
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";}
#media (min-width: 500px) {
.wrapper {
grid-template-columns: 1.5fr 4.5fr;
grid-template-areas:
"header header"
"nav nav"
"sidebar content"
"ad content"
"footer footer";}
nav ul {
display: flex;
justify-content: space-between;}
}
#media (min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"header header header"
"nav content sidebar"
"nav content ad"
"footer footer footer"}
nav ul {
flex-direction: column;
}
.main-nav ul li {
padding-bottom: 5vh;}
}
Solutions/Things I've tried that haven't worked:
-Is height 100% in a certain class a problem or lacking somewhere?
-list-style type in .three ul?
-My Media Queries have a different split of Rows/Columns than what's written in the "content" CSS class?**(big one)
-other weak remedies :)
**The very presence of "grid-areas" for that nested div is maybe unnecessary or the problem? Initially, the 2x2 grid I wanted there wouldn't fill the top left div and just shift everything one, so I made the grid-areas within grid areas----but there are different layouts for the media query/Responsive layout?
So in short, why aren't the nested divs "three" and "four" filling up the entirety of their div? Its margin-bottom really want to be 0! Thank you. Please let me know if I can provide anything to assist.
IMAGE!!!! nested divs "three" and "four" don't fill their parent div (border of larger div in black)
You might have missed setting property height: 100% in div with class "three" and class "four".
The issue seemed to be in the HTML of the code. I've now posted a "Run Code Snippet" that should differ from what I originally pasted in.
Indentation or formatting issues in the HTML seemed to be the issue (?). I ran my code through JS Fiddle to post here, and the "Scrub" option I believe minorly altered the formatting of my HTML and I guess worked! Apologies for the squished CSS code }s, but I didn't want to post a super tall post. That wasn't the issue though. Indenting of items in the HTML i guess resulted in a nested div not fully filling its nest?
Thank you all
I am trying to learn CSS grid, I have nested CSS grid and in which the parent CSS grid container has multiple columns each of them have 4 rows and I want the rows to be equal to each other for example height of the first row in the first column equal to the that in a second column.
#product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
justify-items: center;
padding: 1em;
}
#product-grid img {
width: 100%;
height: 291px;
}
.product-item {
display: grid;
/* grid-auto-rows:1fr; */
grid-template-rows: 70px, 100px, 200px, 100px;
border-style: solid;
border-color: #2c4251;
border-width: 1px;
border-radius: 5px;
padding: 1em;
}
.cntnt {
text-align: justify;
overflow: hidden;
}
.product-item {}
.more {
text-align: left;
align-self: end;
}
.ttl {
margin-top: 20px;
text-align: center;
align-self: flex-start;
}
<div id="product-grid">
<div class='product-item'>
<img src=imgs/1.png>
<div class='ttl'>this is test title</div>
<div class='cntnt'>this is test caption</div>
<div class='more'>
<div><a href=/view.php?pid=1>more </a></div>
</div>
</div>
<div class='product-item'><img src=imgs/2.jpg>
<div class='ttl'>title</div>
<div class='cntnt'>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores, inventore? Officia perferendis</div>
<div class='more'>
<div><a href=/view.php?pid=2>more </a></div>
</div>
</div>
</div>