I'm attempting to practice CSS grids. There's other formatting in the CSS document, which is all being applied properly. However, none of the grids are being applied, and I can't figure out why.
.gridcontainer{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 50px 30px 1fr 1fr 100px;
gap: 15px;
}
header{
grid-column: 1 / 7;
grid-row: 1;
}
a{ grid-row: 2 / 3; }
a#link1{ grid-column: 1 / 2; }
a#link2{ grid-column: 2 / 3; }
a#link3{ grid-column: 3 / 4; }
a#link4{ grid-column: 4 / 5; }
a#link5{ grid-column: 5 / 6; }
a#link6{ grid-column: 6 / 7; }
article#intro{
grid-row: 2 / 4;
grid-column: 1 / 3;
}
article#main{
grid-row: 3 / 5;
grid-column: 3 / 6;
}
aside{ grid-column: 6 / 7; }
aside#side1{ grid-row: 3 / 4; }
aside#side2{ grid-row: 4 / 5; }
footer{ grid-row: 5 / 6; }
footer#footer1{ grid-column: 1 / 3; }
footer#footer2{ grid-column: 3 / 5; }
footer#footer3{ grid-column: 5 / 7; }
<body class="grid-container">
<header><h1>Page Header</h1></header>
<a id="a1">Link 1</a>
<a id="a2">Link 2</a>
<a id="a3">Link 3</a>
<a id="a4">Link 4</a>
<a id="a5">Link 5</a>
<a id="a6">Link 6</a>
<article id="intro">Intro Article</article>
<article id="main">Main Article</article>
<aside id="side1">Side 1</aside>
<aside id="side2">Side 2</aside>
<footer id="footer1">Footer 1</footer>
<footer id="footer2">Footer 2</footer>
<footer id="footer3">Footer 3</footer>
</body>
In your CSS, you are targeting gridcontainer instead of grid-container
Changing .gridcontainer to .grid-container fixes the issue.
You have a typo.
In Html you wrote a class "grid-container" but in css you wrote ".gridcontainer"
edit the class in css to
.grid-container {
display: grid
}
Related
If you look at the nested grid in Firefox and look at the grid display you will see the four separate nested grids each with 1 row and 12 columns. However, if you look at the CSS file you can only assign the element "main-services-text", "main-banner-text", etc., by treating it as a single 4 row grid.
So my question is, is this the way it should work or is it a bug. Also should I use it?
.main-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px 100px 100px 100px;
}
/* Step 1a assign the main elements "" to the MAIN Grid*/
.main-banner {
grid-column: 1 /13;
grid-row: 1 / 2;
background-color: cornflowerblue;
}
.main-services {
grid-column: 1 /13;
grid-row: 2 / 3;
background-color: lightcyan;
}
.main-why-us {
grid-column: 1 /13;
grid-row: 3 / 4;
background-color: orange;
}
.main-who-are-we {
grid-column: 1 /13;
grid-row: 4 / 5;
background-color: chocolate;
}
/* Step 2: Set up individual nested GRIDS*/
main section {
display: grid;
color: olive;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px;
}
/* Step 2 assign elements to the nested grids */
.main-banner-text {
grid-column: 3 / 5;
grid-row: 1 / 2;
}
.main-services-text {
grid-column: 6 / 9;
grid-row: 2 / 3;
}
.main-why-us-text {
grid-column: 10 / 13;
grid-row: 3 / 4;
}
.main-who-are-we-text {
grid-column: 9 / 10;
grid-row: 4 / 5;
}
<main class="main-grid">
<section class="main-banner">Banner</section>
<p class="main-banner-text">Main banner text</p>
<section class="main-services">Services</section>
<p class="main-services-text">Main services text</p>
<section class="main-why-us">Why Us</section>
<p class="main-why-us-text">Main Why us text</p>
<section class="main-who-are-we">Who are we</section>
<p class="main-who-are-we-text">Main who are we text</p>
</main>
In one page of our app we have a grid with two cells stacked one on top of the other.
On Chrome the middle textbox in the grid shown below is clickable, but in Firefox and Edge(17) it cannot be clicked.
I'm curious about which browser has the bug or whether this is undefined behaviour?
More immediately though is there a workaround for Firefox?
Thanks.
.grid {
display: grid;
align-items: stretch;
justify-items: stretch;
grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}
input {
width: 100%;
}
.a {
grid-area: 1 / 1 / span 1 / span 4;
}
.b {
grid-area: 1 / 5 / span 1 / span 4;
}
.c {
grid-area: 1 / 5 / span 1 / span 4;
}
.d {
grid-area: 1 / 9 / span 1 / span 4;
}
<div class="grid">
<div class="a">
<input>
</div>
<div class="b">
<input>
</div>
<div class="c">
</div>
<div class="d">
<input>
</div>
</div>
Stackblitz link: https://stackblitz.com/edit/js-pukd5g?file=index.html
you can reset pointer-events to allow clicking through an element, or reset position to bring an element on top of static elements:
pointer-events:
.grid {
display: grid;
align-items: stretch;
justify-items: stretch;
grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}
input {
width: 100%;
}
.a {
grid-area: 1 / 1 / span 1 / span 4;
}
.b {
grid-area: 1 / 5 / span 1 / span 4;
}
.c {
grid-area: 1 / 5 / span 1 / span 4;
pointer-events:none;/* here it won't catch mouse events */
}
.d {
grid-area: 1 / 9 / span 1 / span 4;
}
<div class="grid">
<div class="a">
<input>
</div>
<div class="b">
<input>
</div>
<div class="c">
</div>
<div class="d">
<input>
</div>
</div>
position
.grid {
display: grid;
align-items: stretch;
justify-items: stretch;
grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}
input {
width: 100%;
position:relative;/* will be at front of static positionned elements */
}
.a {
grid-area: 1 / 1 / span 1 / span 4;
}
.b {
grid-area: 1 / 5 / span 1 / span 4;
}
.c {
grid-area: 1 / 5 / span 1 / span 4;
}
.d {
grid-area: 1 / 9 / span 1 / span 4;
}
<div class="grid">
<div class="a">
<input>
</div>
<div class="b">
<input>
</div>
<div class="c">
</div>
<div class="d">
<input>
</div>
</div>
I'm not sure if it's a bug or just a difference in rendering behavior among browsers.
But a simple workaround is to layer the clickable element over the empty element using z-index.
Add this to your code:
.b {
z-index: 1;
}
.grid {
display: grid;
grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}
input {
width: 100%;
}
.a {
grid-area: 1 / 1 / span 1 / span 4;
}
.b {
grid-area: 1 / 5 / span 1 / span 4;
z-index: 1; /* new */
}
.c {
grid-area: 1 / 5 / span 1 / span 4;
}
.d {
grid-area: 1 / 9 / span 1 / span 4;
}
<div class="grid">
<div class="a">
<input>
</div>
<div class="b">
<input>
</div>
<div class="c">
</div>
<div class="d">
<input>
</div>
</div>
(I am trying to convert this data entry page from a very primitive CSS/HTML "table" layout to something a bit better, using CSS Grid layout).
In line with common practice, it seems, I've made it 12 columns wide. Each entry field has a label, of the same width. In other words my CSS is currently very repetitive:
.container {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-gap: 10px;
}
#SigNameLabel {
grid-column: 1 / 13;
grid-row: 2;
}
#SignatureName {
grid-column: 5 / 13;
grid-row: 2;
}
#PaymentNoLabel {
grid-column: 1 / 13;
grid-row: 3;
}
#PaymentNo {
grid-column: 5 / 13;
grid-row: 3;
}
#CurrencyLabel {
grid-column: 1 / 13;
grid-row: 4;
}
#Currency {
grid-column: 5 / 13;
grid-row: 4;
}
* {
border: 1px solid #999;
}
<div class="container">
<div id='SigNameLabel' class='unselectable'>Signature name:</div>
<div id='SignatureName' class='unselectable dataField single-line'></div>
<div id='PaymentNoLabel' class='unselectable'>Payment No:</div>
<div id='PaymentNo' class='unselectable dataField single-line'></div>
<div id='CurrencyLabel' class='unselectable'>Currency:</div>
<div id='Currency' class='dataField single-line'></div>
</div>
Short of using JS to "create" the layout in automated fashion, i.e. by analysing the DIVs in the container, is there any way to make the CSS less cumbersome and explicit, more just "taking its lead from" what the HTML does?
For example, I have had to give a specific ID to each of the labels here: when they each sat in their own TD they didn't need that. Is there any way each such label DIV could be given a class, say left-hand-column, and somehow they could all have grid-column: 1 / 13 applied to them, and somehow the same grid-row as the data field DIV to their right?
You can simplify your code like below. And you don't necessarily need 12 columns
.container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-gap: 10px;
}
.container>*:nth-child(even) {
grid-column: span 2;
border:1px solid;
}
.container>*:nth-child(odd) {
/* Not sure if you need this but it will allow
the full width of the grid like your code grid-column: 1 / 13;
width:calc(300% + 2*10px); */
border:1px solid red;
}
<div class="container">
<div id='SigNameLabel' class='unselectable'>Signature name:</div>
<div id='SignatureName' class='unselectable dataField single-line'></div>
<div id='PaymentNoLabel' class='unselectable'>Payment No:</div>
<div id='PaymentNo' class='unselectable dataField single-line'></div>
<div id='CurrencyLabel' class='unselectable'>Currency:</div>
<div id='Currency' class='dataField single-line'></div>
</div>
Please check the following example in codepen. I want the page to fit exactly in the viewport but the page is bigger than the viewport and the browser is showing scrollbars. How can I fit the page exactly in the viewport?
https://codepen.io/manuchadha/pen/PBKYBJ
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<title>Example</title>
<!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
<link rel="stylesheet" media="screen" href="./fiddle.css">
</head>
<body>
<div class="css-grid-container"> <!-- 3 rows, 1 column-->
<div id="app-nav-component" class=" common-styles-div--white">NAV</div> <!-- 1st row of css-grid-containerr-->
<div id="homepage-top-div" class="body__div--background homepage-component-css-grid-container"> <!-- 2nd row of css-grid-containerr-->
<p id="homepage-p"><span>Welcome </span> to my page. </p>
<div id="create-component-top-div" class="css-grid-container__create-div common-styles-div--white"> <!-- 4 rows, 1 column-->
<p class="css-grid-item__create-para1-div"> Para1 </p>
<p class="css-grid-item__create-para2-div"> Para2 </p>
<p class="css-grid-item__create-para3-div"> Para3 </p>
<button id="get-question-list-button" class="btn content-div__button--blue css-grid-item__create-button-div btn-sm">Button</button>
</div>
<div id="practice-component-top-div" class="css-grid-container__practice-div common-styles-div--white"> <!-- 4 rows, 1 column-->
<!-- this container item is also a container -->
<!-- this is a container -->
<p class="css-grid-item__practice-para1-div"> Para 4 </p>
<p class="css-grid-item__practice-para2-div"> Para 5 </p>
<p class="css-grid-item__practice-para3-div"> Para 6 </p>
<!-- clicking the button will bring up a new component on the page - NewPracticeQuestionComponent. Check the app-routing.module-->
<button id="new-question-button" class="btn content-div__button--blue css-grid-item__practice-button-div btn-sm">Button2</button>
<!--button type="button" class="content-div__button--blue css-grid-item__practice-button-div"> Practice! </button-->
</div>
</div>
<div id="app-footer-component" class="common-styles-div--white">FOOTER</div> <!-- 3rd row of css-grid-containerr-->
<!-- grid child -->
</div>
</body>
CSS
.css-grid-container{
height:100vh; /*height of the container is same ahs height of the view port.*/
display: grid;
grid-gap:20px;
grid-template-columns: 1fr; /* 1 columns*/
grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}
div#app-nav-component{ /*1st row, all columns*/
grid-column:1/-1;
grid-row:1/2;
}
div#homepage-top-div{ /*2nd row, all columns*/
grid-column:1/-1;
grid-row:2/3;
}
div#app-footer-component{ /*3rd row, all columns*/
grid-column:1/-1;
grid-row:3/4;
}
.body__div--background {
background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color:#555555;
font-family: Helvetica;
line-height:1.5;
font-size: 11px;
letter-spacing: 0.25px;
}
.homepage-component-css-grid-container{
display: grid;
grid-gap:20px;
grid-template-rows: 50px 1fr; /*1st row size to fit<p>, remaining for practice-component and create-component both will be in same row but different columns*/
grid-template-columns: 1fr 1fr; /* 2 columns*/
/* height:100%; /*added `height:100%` rule as otherwise, the height of the grid was only up to the height of its children*/
}
div#app-content-component{
grid-column:1/-1;
grid-row:2/3;
}
.css-grid-container__create-div{
display:grid;
grid-template-rows:1fr 1fr 1fr 1fr;
grid-template-columns: 1fr;
/*grid-template-rows: auto auto auto auto;*/
/*height:300px; /* couldn't make it %*/
/*width:250px;*/
}
.css-grid-item__create-para1-div{
margin-left:40px;
margin-top:30px;
grid-column: 1 / -1;
grid-row: 1 / 2;
}
.css-grid-item__create-para2-div{
margin-left:40px;
margin-top:30px;
grid-column: 1 / -1;
grid-row: 2 / 3;
}
.css-grid-item__create-para3-div{
margin-left:40px;
margin-top:30px;
grid-column: 1 / -1;
grid-row: 3 / 4;
}
.css-grid-item__create-button-div{
align-self: center;
justify-self:center;
grid-column: 1 / -1;
grid-row: 4 / 5;
}
p#homepage-p {
/*font-style font-variant font-weight font-size/line-height font-family*/
font: 300 1.5em 'Raleway', sans-serif;
color: rgba(0,0,0,.5);
grid-row: 1/2;
grid-column: 1/-1;
}
.css-grid-container__practice-div{
display:grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
/*height:300px; /* could it be made % ?*/
/*width:250px;
line-height:2em;
font-size: 1em;*/
}
.css-grid-item__practice-para1-div{
margin-left:40px;
margin-top:30px;
grid-column: 1 / -1;
grid-row: 1 / 2;
}
.css-grid-item__practice-para2-div{
margin-left:40px;
margin-top:30px;
grid-column: 1 / -1;
grid-row: 2 / 3;
}
.css-grid-item__practice-para3-div{
margin-left:40px;
margin-top:30px;
grid-column: 1 / -1;
grid-row: 3 / 4;
}
.css-grid-item__practice-button-div{
align-self: center;
justify-self:center;
grid-column: 1 / -1;
grid-row: 4 / 5;
}
div#create-component-top-div{
grid-row: 2/3;
grid-column: 1 / 2;
height:90%;
width:70%;
align-self: center;
justify-self:center;
}
div#practice-component-top-div{
grid-row: 2/3;
grid-column: 2 / 3;
height:90%;
width:70%;
align-self: center;
justify-self:center;
}
You're not using any sort of reset CSS, so your issue is the browser's default CSS. body has a default margin, so if you add body { margin: 0; } to your stylesheet, your scrollbar will disappear.
I am trying to get the content of item to be in the middle column, but it does not seem to be moving.
.home-grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 0.10fr 0.98fr auto;
height: 100vh;
}
.home-header {
grid-column: 1 / span 3;
grid-row: 1 / span 1;
background: #3f51b5;
}
.home-main {
grid-column: 1 / span 3;
grid-row: 2 / span 3;
background: #81d4fa;
}
.item {
grid-column: 2 / span 1;
grid-row: 2 / span 3;
}
.home-footer {
grid-column: 1 / span 3;
grid-row: 5 / span 1;
background: #3f51b5;
div {
text-align: center;
margin: 2vh;
}
}
<div class="home-grid-container">
<div class="home-header">
<h1>
<img src="/src/imgs/sitelogo.png" />
</h1>
</div>
<div class="home-main">
<div class="item">
Simple, Fast, Powerful
<input type="button" value="100% Free" />
</div>
</div>
<div class="home-footer">
<div>All Rights Reserved</div>
</div>
</div>
https://css-tricks.com/snippets/css/complete-guide-grid/
The elements you want to center are descendants, but not children, of the grid container.
Because grid layout only extends between parent and child elements, the .item element is out of scope and will not accept grid properties.
But these elements are inline-level children of a block container, which means that text-align: center will work.
.home-grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 0.10fr 0.98fr auto;
height: 100vh;
}
.home-header {
grid-column: 1 / span 3;
grid-row: 1 / span 1;
background: #3f51b5;
}
.home-main {
grid-column: 1 / span 3;
grid-row: 2 / span 3;
background: #81d4fa;
}
.item {
grid-column: 2 / span 1;
grid-row: 2 / span 3;
text-align: center; /* NEW */
}
.home-footer {
grid-column: 1 / span 3;
grid-row: 5 / span 1;
background: #3f51b5;
}
<div class="home-grid-container">
<div class="home-header">
<h1>
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
</h1>
</div>
<div class="home-main">
<div class="item">
Simple, Fast, Powerful
<input type="button" value="100% Free" />
</div>
</div>
<div class="home-footer">
<div>All Rights Reserved</div>
</div>
</div>
jsFiddle demo
If you want to use the grid for a child of your container, you can always just inherit the same properties.
.home-grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 0.10fr 0.98fr auto;
height: 100vh;
}
.home-header {
grid-column: 1 / span 3;
grid-row: 1 / span 1;
background: #3f51b5;
}
.home-main {
grid-column: 1 / span 3;
grid-row: 2 / span 3;
background: #81d4fa;
/* inherit the container-grid setup */
display: grid;
grid-template-columns: inherit;
grid-template-rows: inherit;
}
.item {
grid-column: 2 / span 1;
grid-row: 2 / span 3;
}
.home-footer {
grid-column: 1 / span 3;
grid-row: 5 / span 1;
background: #3f51b5;
div {
text-align: center;
margin: 2vh;
}
}
<div class="home-grid-container">
<div class="home-header">
<h1>
<img src="https://dummyimage.com/200x50/cccccc/ffffff.png" />
</h1>
</div>
<div class="home-main">
<div class="item">
Simple, Fast, Powerful
<input type="button" value="100% Free" />
</div>
</div>
<div class="home-footer">
<div>All Rights Reserved</div>
</div>
</div>
As others have pointed out, since the item element isn't a direct child of the grid container - you can't apply grid properties to it.
Obviously, to fix this you could pull the item out of the home-main div and make it a direct child of the grid - but I'm guessing that that's not a viable solution here :)
Grid Layout Module Level 2 - Subgrids are supposed to solve this problem.
Subgrid is currently only a draft spec, but fwiw, in your case you would do something like:
.home-main {
display: subgrid;
grid-column: span 3;
}
Nevertheless, there actually is a way to pull this off:
display: contents (caniuse)
From Caniuse:
display: contents causes an element's children to appear as if they
were direct children of the element's parent, ignoring the element
itself. This can be useful when a wrapper element should be ignored
when using CSS grid or similar layout techniques.
So in order for the grid placement properties to work on the item, you could simply add display: contents; to home-main (currently working in Firefox)
(NB: This will obviously render the grid properties on home-main useless - but then again - they aren't necessary to place the item)
.home-main {
display: contents;
...
}
.home-grid-container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 0.10fr 0.98fr auto;
height: 100vh;
}
.home-header {
grid-column: 1 / span 3;
grid-row: 1 / span 1;
background: #3f51b5;
}
.home-main {
/*grid-column: 1 / span 3;
grid-row: 2 / span 3; */
display: contents;
background: #81d4fa;
}
.item {
grid-column: 2 / span 1;
grid-row: 2 / span 3;
background: salmon;
}
.home-footer {
grid-column: 1 / span 3;
grid-row: 5 / span 1;
background: #3f51b5;
}
.home-footer div {
text-align: center;
margin: 2vh;
}
<div class="home-grid-container">
<div class="home-header">
<h1>
<img src="/src/imgs/sitelogo.png" />
</h1>
</div>
<div class="home-main">
<div class="item">
Simple, Fast, Powerful
<input type="button" value="100% Free" />
</div>
</div>
<div class="home-footer">
<div>All Rights Reserved</div>
</div>
</div>