When I say it doesnt fill the cell this is what I mean I am having trouble with a grid I created. The items placed in the grid don't fill the cell. All the items seem to be positioned correctly and it is responsive but they won't actually fill the cell. Sorry if this is so obvious, I'm a newbie to HTML and CSS. I think that my code is not completely optimized and could a lot shorter but that's the way I found :').
Here the HTML code
.about-grid {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
grid-template-areas: "nav nav nav nav" "sidebar main main main" "sidebar content1 content2 content3" "sidebar footer footer footer";
grid-gap: 0.2rem;
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
color: #004d40;
text-align: center;
}
.about-grid nav {
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid main {
background: #84ffff;
grid-area: main;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #sidebar {
background: #18ffff;
grid-area: sidebar;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #content1 {
background: #6fffd2;
grid-area: content1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #content2 {
background: #64ffda;
grid-area: content2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #content3 {
background: #73ffba;
grid-area: content3;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid a {
text-align: center;
display: block;
font-family: inherit;
text-decoration: none;
font-weight: bold;
margin: 1rem;
}
#media only screen and (max-width: 550px) {
.about-grid {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
grid-template-areas: "nav" "sidebar" "main" "content1" "content2" "content3" "footer";
}
}
<main class="about-bg">
<div class="about-grid">
<nav>Navbar</nav>
<main>Main</main>
<div id="sidebar">Sidebar</div>
<div id="content1">Content1</div>
<div id="content2">Content2</div>
<div id="content3">Content3</div>
<footer>Footer</footer>
</div>
</main>
I didn't quite understand your problem, but I saw a different problem in your code. When you fill all the cells with large text, then your grid will go beyond the screen. Perhaps you meant this problem. You need to specify the overflow-wrap: anywhere rule for the .about-grid selector. Now the contents of the cells will depend on the width of the cells themselves.
To check how overflow-wrap: anywhere works. Run this snippet and remove the overflow-wrap: anywhere rule from the .about-grid selector and you should see what I'm talking about.
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.about-grid {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
grid-template-areas: "nav nav nav nav" "sidebar main main main" "sidebar content1 content2 content3" "sidebar footer footer footer";
grid-gap: 0.2rem;
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
color: #004d40;
text-align: center;
overflow-wrap: anywhere; /*add this it*/
}
.about-grid nav {
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid main {
background: #84ffff;
grid-area: main;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #sidebar {
background: #18ffff;
grid-area: sidebar;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #content1 {
background: #6fffd2;
grid-area: content1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #content2 {
background: #64ffda;
grid-area: content2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #content3 {
background: #73ffba;
grid-area: content3;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid a {
text-align: center;
display: block;
font-family: inherit;
text-decoration: none;
font-weight: bold;
margin: 1rem;
}
#media only screen and (max-width: 550px) {
.about-grid {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
grid-template-areas: "nav" "sidebar" "main" "content1" "content2" "content3" "footer";
}
}
<main class="about-bg">
<div class="about-grid">
<nav>Navbar</nav>
<main>Main</main>
<div id="sidebar">SidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebar</div>
<div id="content1">Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1</div>
<div id="content2">Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2</div>
<div id="content3">Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3</div>
<footer>Footer</footer>
</div>
</main>
Do you mean to remove the little margins between cells? If so, then setting grid-gap: 0 will do it:
Demo:
.about-grid
{
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
grid-template-areas:
"nav nav nav nav"
"sidebar main main main"
"sidebar content1 content2 content3"
"sidebar footer footer footer";
/*The only thing I changed, grid-gap*/
grid-gap: 0;
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
color: #004d40;
text-align: center;
}
.about-grid nav {
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid main {
background: #84ffff;
grid-area: main;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #sidebar {
background: #18ffff;
grid-area: sidebar;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #content1 {
background: #6fffd2;
grid-area: content1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #content2 {
background: #64ffda;
grid-area: content2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid #content3 {
background: #73ffba;
grid-area: content3;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.about-grid a {
text-align: center;
display: block;
font-family: inherit;
text-decoration: none;
font-weight: bold;
margin: 1rem;
}
#media only screen and (max-width: 550px) {
.about-grid {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3"
"footer";
}
}
<main class="about-bg">
<div class="about-grid">
<nav>Navbar</nav>
<main>Main</main>
<div id="sidebar">Sidebar</div>
<div id="content1">Content1</div>
<div id="content2">Content2</div>
<div id="content3">Content3</div>
<footer>Footer</footer>
</div>
</main>
Related
here's my html code
<div>
<div id="navbar" class="box">Navbar</div>
<div id="sidenav " class="box">Side Navbar</div>
<div id="main " class="box">Main</div>
<div id="footer " class="box">Footer</div>
</div>
and here's my scss code
div{
display: grid;
width:100%;
height: 100%;
grid-template-columns: 25% 75% 25%;
grid-gap: 15px;
grid-template-rows:25% 50% 25% ;
// grid-gap: 15px;
grid-template-areas:
"hd hd hd "
"sd ma ma "
"ft ft ft ";
.box{
display: flex;
// text-align: center;
border: 3px solid red;
/* width:150px;
height: 150px; */
margin: auto;
align-items: center;
justify-content: center;
}
#navbar{
grid-area: hd;
}
#sidenav{
grid-area: sd;
}
#main{
grid-area: ma;
}
#footer{
grid-area: ft;
}
}
the problem is the footer div doesn't display in the bottom here's a screenshot
what i want is to make the footer display at the bottom so what seems to be the problem here
There are some issues that I found in your code which makes the layout little wonky.
grid-template-columns: 25% 75% 25%;
The column total is more than 100%, so it will not work perfectly.
I would highly recommend you to use a CSS grid generator online like https://grid.layoutit.com/
For your layout, I would also not recommend structure 3x3 (columns and rows) - As from the image you shared above it looks like the following
1 row - For "Navbar" (this doesnt need any sub columns)
1 row - For Content -> this has 2 columns 1 for "SideNav" and 1 for "Main"
1 row - For "Footer" (again you dont need sub columns)
Based on this your HTML structure will end up looking like
<div class="container">
<div class="navbar">Navbar</div>
<div class="Content">
<div class="SideNav">Side Nav</div>
<div class="Main">Main</div>
</div>
<div class="Footer">Footer</div>
</div>
And your CSS will look like this
body{
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 25% 50% 25%;
gap: 0px 0px;
grid-template-areas:
"navbar"
"Content"
"Footer";
}
.navbar {
grid-area: navbar;
background-color: #f5f5f5;
padding: 16px;
text-align: center;
}
.Content {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"SideNav Main";
grid-area: Content;
}
.SideNav {
grid-area: SideNav;
background-color: #e5e5e5;
padding: 16px;
}
.Main {
grid-area: Main;
background-color: salmon;
padding: 16px;
}
.Footer {
grid-area: Footer;
background-color: #d5d5d5;
padding: 16px;
text-align: center;
}
Here, if you check the code well, the container has 3 rows (25% - navbar, 50% - content, 25% - footer)
And then content has 2 columns (360px - Sidenav, 1fr - Main)
Hope this helps :)
You can also see the code live on my codepen : https://codepen.io/raunaqpatel/pen/WNyQqmm
Or here:
body{
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 25% 50% 25%;
gap: 0px 0px;
grid-template-areas:
"navbar"
"Content"
"Footer";
}
.navbar {
grid-area: navbar;
background-color: #f5f5f5;
padding: 16px;
text-align: center;
}
.Content {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"SideNav Main";
grid-area: Content;
}
.SideNav {
grid-area: SideNav;
background-color: #e5e5e5;
padding: 16px;
}
.Main {
grid-area: Main;
background-color: salmon;
padding: 16px;
}
.Footer {
grid-area: Footer;
background-color: #d5d5d5;
padding: 16px;
text-align: center;
}
<div class="container">
<div class="navbar">Navbar</div>
<div class="Content">
<div class="SideNav">Side Nav</div>
<div class="Main">Main</div>
</div>
<div class="Footer">Footer</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
I use grids to customise my html layout and it does not work as I want. I want my nav to take all available width.
Here is my code:
header {
text-align: center;
grid-area: header;
border: solid;
}
#nav1 {
text-decoration: none;
border: solid;
background-color: green;
grid-area: MH;
width: 1fr;
text-align: center;
}
#nav2 {
text-decoration: none;
border: solid;
background-color: red;
grid-area: MC;
width: 1frs;
text-align: center;
}
#nav3 {
text-decoration: none;
border: solid;
background-color: yellow;
grid-area: start;
width: 1fr;
text-align: center;
}
footer {
grid-area: footer;
border: solid;
background-color: orange;
margin-top: 0px;
height: 100px;
}
main {
text-decoration: none;
border: solid;
background-color: gray;
grid-area: main;
height: 500px;
color: #ff00eb;
border-color: black;
}
aside {
width: 0.5fr;
border: solid;
background-color: purple;
grid-area: aside;
}
#big-container,
nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: 'header header header' 'MH MC start' 'main main aside' 'footer footer footer ';
grid-gap: 0px;
padding: 0px;
<!-- detta är min header-->
<header>
<h1></h1>
</header>
<div id="big-container">
<nav>
mitt hus
min calender
main
</nav>
<main>
main
</main>
<aside>
aside
</aside>
<footer>
footer
</footer>
</div>
I would assign to the nav bar the display flex attribute. Like that:
header {
text-align: center;
grid-area: header;
border: solid;
}
footer {
grid-area: footer;
border: solid;
background-color: orange;
margin-top: 0px;
height: 100px;
}
main {
text-decoration: none;
border: solid;
background-color: gray;
grid-area: main;
height: 500px;
color: #ff00eb;
border-color: black;
}
aside {
width: 0.5fr;
border: solid;
background-color: purple;
grid-area: aside;
}
#big-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: 'header header header' 'MH MC start' 'main main aside' 'footer footer footer ';
grid-gap: 0px;
padding: 0px;
}
nav {
width: 100%;
background: lightblue;
display: flex;
justify-content: center;
}
nav > a {
display: block;
text-decoration: none;
border: solid;
text-align: center;
width:100%;
}
nav > a:nth-child(1) {
background-color: green;
}
nav > a:nth-child(2) {
background-color: green;
}
nav > a:nth-child(3) {
background-color: green;
}
<!-- detta är min header-->
<header>
<h1></h1>
</header>
<nav>
mitt hus
min calender
main
</nav>
<div id="big-container">
<main>
main
</main>
<aside>
aside
</aside>
<footer>
footer
</footer>
</div>
Here is a simplified version (in terms of code) of what you wanna achieve:
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "header header header" "nav nav nav" "main main aside" "footer footer footer ";
}
header {
text-align: center;
grid-area: header;
border: solid;
}
nav {
grid-area: nav;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#nav1 {
text-decoration: none;
border: solid;
background-color: green;
text-align: center;
}
#nav2 {
text-decoration: none;
border: solid;
background-color: red;
text-align: center;
}
#nav3 {
text-decoration: none;
border: solid;
background-color: yellow;
text-align: center;
}
main {
text-decoration: none;
border: solid;
background-color: gray;
grid-area: main;
height: 500px;
color: #ff00eb;
border-color: black;
}
aside {
width: 0.5fr;
border: solid;
background-color: purple;
grid-area: aside;
}
footer {
grid-area: footer;
border: solid;
background-color: orange;
margin-top: 0px;
height: 100px;
}
<header>
header
</header>
<nav>
mitt hus
min calender
main
</nav>
<main>
main
</main>
<aside>
aside
</aside>
<footer>
footer
</footer>
I have two web pages - one is a Product Listings Page:
/*BUTTON STYLE*/
button {
background-color: #132257;
color: white;
border: 0.25em solid white;
cursor: pointer;
width: 100%;
height: 90%;
}
/*PRODUCT LISTINGS PAGE*/
.shoplayout {
grid-area: MC;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-areas: "filters listing";
}
.filters {
grid-area: filters;
}
.listing {
grid-area: listing;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75em;
}
.product {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
border: 0.125em solid #1b2493;
}
.product>* {
height: 8vh;
line-height: 8vh;
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.product div:nth-child(even) {
/*Every second div within a product has the same background*/
background-color: lightsteelblue;
}
.productbuy {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
border: none;
}
.productpic {
grid-row: 1;
padding: 0;
border: none;
display: flex;
justify-items: center;
height: 20vh;
}
.productpic>img {
/*https: //stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container*/
max-width: 100%;
max-height: 100%;
}
/*PRODUCT DETAILS PAGE*/
.productdetails {
grid-area: MC;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, auto);
gap: 1em;
}
.productdetails>* {
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.picdetail {
grid-column: 1 / span 2;
grid-row: 1;
background-color: cornsilk;
justify-items: center;
border: none;
}
.picdetail img {
max-width: 100%;
max-height: 100%;
}
.productnumbers {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
}
<!-- CONTENT -->
<div class="content" id="elemToSlide">
<div class="shoplayout">
<div class="listing">
<!--ALL PRODUCTS IN HERE-->
<div class="product">
<div>Ch. BonPlonque, 2019</div>
<div>Bordeaux, France</div>
<div>Crisp fresh white</div>
<div>3.21/5, 3 reviews</div>
<!--DISPLAY AS A 4 COL INNER GRID-->
<div class="productbuy">
<div>€15.95</div>
<div>Stock: 5</div>
<div><button>Buy</button></div>
<div>Qty</div>
</div>
</div>
<!--END LISTING COLUMNS-->
</div>
<!--END SHOP CONTENT-->
</div>
One is a Products Details Page:
/*BUTTON STYLE*/
button {
background-color: #132257;
color: white;
border: 0.25em solid white;
cursor: pointer;
width: 100%;
height: 90%;
}
/*PRODUCT LISTINGS PAGE*/
.shoplayout {
grid-area: MC;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-areas: "filters listing";
}
.filters {
grid-area: filters;
}
.listing {
grid-area: listing;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75em;
}
.product {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
border: 0.125em solid #1b2493;
}
.product>* {
height: 8vh;
line-height: 8vh;
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.product div:nth-child(even) {
/*Every second div within a product has the same background*/
background-color: lightsteelblue;
}
.productbuy {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
border: none;
}
.productpic {
grid-row: 1;
padding: 0;
border: none;
display: flex;
justify-items: center;
height: 20vh;
}
.productpic>img {
/*https: //stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container*/
max-width: 100%;
max-height: 100%;
}
/*PRODUCT DETAILS PAGE*/
.productdetails {
grid-area: MC;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, auto);
gap: 1em;
}
.productdetails>* {
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.picdetail {
grid-column: 1 / span 2;
grid-row: 1;
background-color: cornsilk;
justify-items: center;
border: none;
}
.picdetail img {
max-width: 100%;
max-height: 100%;
}
<!--,GRID CELL 5, 2 - DISPLAYS AS A 4 COL INNER GRID-->
<div class="productbuy">
<div>€15.95</div>
<div>Stock: 5</div>
<div><button>Buy</button></div>
<div>Qty</div>
</div>
Pretty much everything displays as I want with the exception of the button captioned BUY:
The HTML for the .productbuy element is identical in both cases, the CSS is identical in both cases 9with the exception of the nth child background-color), the button style applies across the entire website, so I am puzzled as to why this is happening.
Any and all suggestions gratefully received.
Thanks to both MD Code and Andrea who spotted that there must have been a problem with the parent containers. In the second case, the product details page, there was a div missing from the page structure, and the CSS for both pages was somewhat messy.
So I tidied things up and it works perfectly now.
Product Details Page HTML is now:
<!-- CONTENT -->
<div class="content" id="elemToSlide">
<!--DETAIL LAYOUT-->
<div class="detailslayout">
<!--A WINE-->
<div class="detailspic">
<img src="images/products/winehorizontallarge.png" />
</div>
<div>Name and vintage</div>
<div>Origin</div>
<div>Description</div>
<div>Reviews</div>
<div>Grapes</div>
<div>Producer</div>
<div class="detailsnumbers">
<div>TA</div>
<div>pH</div>
<div>RS</div>
<div>ABV</div>
</div>
<div class="productbuy">
<div>€15.95</div>
<div>Stock: 5</div>
<div><button>Buy</button></div>
<div>Qty</div>
</div>
<!--END WINE-->
</div>
<!--END DETAIL LAYOUT-->
</div>
<!--END CONTENT-->
Putting in the div "DetailsLayout" meant the page structure was correct; I then tidied up the CSS:
/*LAYOUT FOR THE PLP*/
.shoplayout {
grid-area: MC;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-areas: "filters listing";
}
/*LAYOUT FOR THE PDP - THIS WAS MISSING PREVIOUSLY*/
.detailslayout {
grid-area: MC;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, auto);
gap: 1em;
}
.detailslayout > * {
height: 8vh;
line-height: 8vh;
}
.products {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
border: 0.125em solid #1b2493;
}
.products > * {
height: 8vh;
line-height: 8vh;
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.products div:nth-child(even) {
background-color: lightsteelblue;
}
.productbuy {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
border: none;
background-color: lightsteelblue;
}
.productpic {
grid-row: 1;
padding: 0;
border: none;
display: flex;
justify-items: center;
height: 20vh;
}
.productpic img, .detailspic img {
max-width: 100%;
max-height: 100%;
}
.detailspic {
grid-column: 1 / span 2;
grid-row: 1 ;
background-color: cornsilk;
justify-items: center;
border: none;
height: 20vh;
}
.detailsnumbers {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
}
Now, on both pages the buttons render in the same way on the PLP:
And on the PDP:
Thanks to all for your help,
Dermot
The problem is not your style, button is working good but on details page your button's styles is according to the div parent change div parent style
I am trying to achieve this, I want the nav and header tags to fill the left side.
html {
width: 100%;
overflow: hidden;
}
body {
display: grid;
grid-template-rows: 1fr 5fr 1fr;
grid-template-columns: 2fr 5fr 3fr;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
header {
background: yellowgreen;
}
nav {
background: lightblue;
}
main {
background: aliceblue;
}
footer {
background: lightgoldenrodyellow;
}
<header>Banner</header>
<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>
You can try like this
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header main main main '
'menu main main main '
'menu footer footer footer ';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item5">Footer</div>
</div>
Here's an example of how you could define grid-areas
html {
overflow: hidden;
}
body {
display: grid;
grid-template-rows: 25px 100px;
grid-template-columns: 80px 1fr;
grid-template-areas: "header main" "nav main" "nav footer";
}
body>header {
grid-area: header;
background-color: yellowgreen;
}
body>nav {
grid-area: nav;
background-color: lightblue;
}
body>main {
grid-area: main;
background-color: aliceblue;
}
body>footer {
grid-area: footer;
background-color: lightgoldenrodyellow;
}
<header>Banner</header>
<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>
Why is the align-self/justify-self: start/center/end (or any variation) working within my 'nestedheader' container. I'm trying to get the Header box on the left-hand side, but I feel like it already should be as it is in a grid.
.header {
grid-area: header;
background-color: #222222;
}
.nestedheader {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 70px;
grid-gap: 20px;
grid-template-areas: "headername headername headercopy headercopy" "headername headername headercopy headercopy";
color: white;
font-family: 'Rubik', sans-serif;
}
.headername {
grid-area: headername;
font-size: 30px;
padding-right: 20px;
border: 5px solid red;
justify-self: start;
}
.headercopy {
grid-area: headercopy;
font-weight: lighter;
padding-right: 20px;
border: 5px solid red;
}
Here is the CodePen: https://codepen.io/anon/pen/dezVpO
You code was quite fine. The only thing you did not check was the size of the .header and of the .nestedheader.
They did not fill the whole first row.
Check out the changes on header and nestedheader. I simply set the width to 100%.
html, body {
margin: 0;
font-size: 100%;
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: minmax(100px, auto);
grid-gap: 7px;
grid-template-areas:
"header header header header"
"intro intro main main"
"intro intro main main"
"bottom bottom bottom bottom"
"bottom bottom bottom bottom"
"footer footer footer footer";
text-align: center;
}
.container > div {
padding: 5px;
border: 3px solid #222222;
display: flex;
align-items: center;
justify-content: center;
color: #2B0E24;
}
/* --- Header Start --- */
.header {
grid-area: header;
box-sizing: border-box;
width: 100%;
background-color: #222222;
}
.nestedheader {
box-sizing: border-box;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
grid-template-areas:
"headername headername headercopy headercopy";
color: white;
font-family: 'Rubik', sans-serif;
}
.headername {
grid-area: headername;
font-size: 30px;
padding-right: 20px;
border: 5px solid red;
}
.headercopy {
grid-area: headercopy;
font-weight: lighter;
padding-right: 20px;
border: 5px solid red;
}
/* --- Header End --- */
.intro {
grid-area: intro;
height: 450px;
}
.main {
grid-area: main;
height: 450px;
}
.bottom {
grid-area: bottom;
height: 800px;
}
.footer {
grid-area: footer;
height: 325px;
background-color: #222222;
color: white;
}
/* --- Footer Start --- */
.footertext {
color: white;
font-family: 'Rubik', sans-serif;
font-size: 30px;
}
.footerlinks {
font-size: 16px;
font-weight: lighter;
}
a {
color: #20bde5;
text-decoration: none;
padding: 10px;
}
a:hover {
color: white;
}
/* --- Footer End --- */
<div class="container">
<!-- Header Start -->
<div class="header">
<div class="nestedheader">
<div class="headername">Header Name</div>
<div class="headercopy">This is the page copy</div>
</div>
</div>
<!-- Header End -->
<div class="intro">Intro</div>
<div class="main">Main</div>
<div class="bottom">Bottom</div>
<!--Footer Start-->
<div class="footer">
<div class="footertext">
Here we go...<br><br>
<div class="footerlinks">
about
contact
social
</div>
</div>
<!--Footer End-->
</div>