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>
Related
I have 4 icons which should align like the image below.
I've tried to first put them into a <div> with a class which controlls the position.
Now with my knowledge I would give every each image a absolute position, but that will not work, because on every res. my images are not together and just all over the place.
How can I align my images like a "flower" in a responsive way.
For a responsive layout you can use CSS grid:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 50vw;
aspect-ratio: 3 / 2;
}
.container>div {
aspect-ratio: 1 / 1;
border: 1px solid black;
box-sizing: border-box;
}
.container>div:nth-child(1) {
grid-column: 1;
grid-row: 2 / span 2;
}
.container>div:nth-child(2) {
grid-column: 2;
grid-row: 1 / span 2;
}
.container>div:nth-child(3) {
grid-column: 3;
grid-row: 2 / span 2;
}
.container>div:nth-child(4) {
grid-column: 2;
grid-row: 3 / span 2;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Obviously set the container width to what you require.
This snippet sets the divs in a clockwise fashion starting at the left most div.
I have just recreated what you posted above. I can help you when you specify what you really need
.main {
display: flex;
height:100%;
align-items:center
}
.sec{
height: 50px;
width: 50px;
border:1px solid black
}
<div class="main">
<div class="sec"></div>
<div class="sec2">
<div class="sec"></div>
<div class="sec"></div>
</div>
<div class="sec"></div>
</div>
Need to create 3 columns wrapped in a flex container and aligned vertically
.wrapper {
display: flex;
}
.column {
align-items: center;
}
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 struggling to get what I want and I am not sure if its even possible.
Tried everything I got, showing some code below
section {
display: grid;
grid-template-columns: auto auto auto auto;
}
section > *{
border: 1px solid red;
}
section > h1{
grid-row: 1;
grid-column: 2 / 3;
}
section > h2{
grid-row: 2;
grid-column: 2 / 3;
}
section > img{
grid-row: 1/2;
grid-column: 1 / 3;
width: 20%;
}
section > span{
grid-row: 1;
grid-column: 3 / 3;
}
<div>
<section>
<h1>HEADING</h1>
<img src=img.png alt="">
<h2>HEADING 2</h2>
<span>11:44</span>
</section>
<section>
<h1>HEADING</h1>
<img src=img.png alt="">
<h2>HEADING 2</h2>
<span>11:44</span>
</section>
...
</div>
I want the image to appear left, using the upper and lower cell, so full height.
I want the h1 to use the upper center space.
I want the h2 to use the lower center space.
i want the span to use the upper right space.
The lower right space should be combined with the lowercenter in case the content of lowercenter overflows.
You were almost there but there were some issues.
You defined a four column grid but your description only requires three.
grid-template-columns: auto 1fr 1fr; /* (seems more appropriate) /*
* {
margin: 0 !important;
}
section {
display: grid;
grid-template-columns: auto 1fr 1fr;
}
section>* {
border: 1px solid red;
}
section>h1 {
grid-row: 1;
grid-column: 2 / 3;
}
section>h2 {
grid-row: 2;
grid-column: 2 / 4;
/* span 2 columns*/
}
section>img {
grid-row: 1 / 3;
/* span 2 rows */
}
section>span {
grid-row: 1;
}
<section>
<h1>HEADING</h1>
<img src="https://placekitten.com/200/200" alt="">
<h2>HEADING 2</h2>
<span>11:44</span>
</section>
I want the h2 to use the lower center space.
I want the span to use the upper right space.
The lower right space should be combined with the lowercenter in case the content of lowercenter overflows.
The h2 area is supposed to span 2 columns so we extend it out into column 3.
I am currently working on a page using the CSS grid layouts, however I ran into a problem with div elements in which they automatically insert a line break into the output above and below the text.
Is there any way to easily remove these with CSS?
I tried changing the div element to span, but nothing changed. I also set the div elements to display: inline; but that didn't work either.
html {
background-color: black;
}
.grid-container {
display: grid;
width: 1200px;
height: 600px;
grid-template-columns: 300px 1fr 1fr;
grid-template-rows: 110px 200fr 200fr 80px;
grid-gap: 1rem;
background-color: #2196F3;
padding: 10px;
margin: auto;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
display: inline-block;
}
.grid-heading {
grid-row: 1 / 2;
grid-column: 1 / 4;
font-size: 40px;
padding: 5px;
}
.grid-sidebar {
grid-row: 2 / 4;
grid-column: 1 / 2;
}
.grid-content1 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
.grid-content2 {
grid-row: 3 / 4;
grid-column: 2 / 4;
}
.grid-footer {
grid-row: 4 / 5;
grid-column: 1 / 4;
}
<!DOCTYPE html>
<title>
Home
</title>
<head>
</head>
<html>
<br>
<br>
<br>
<div class="grid-container">
<div class="grid-item grid-heading">
<h1>Heading</h1>
</div>
<div class="grid-item grid-sidebar">
<p>2</p>
</div>
<div class="grid-item grid-content1">3</div>
<div class="grid-item grid-content2">4</div>
<div class="grid-item grid-footer">5</div>
</div>
</html>
Try
div{
display:inline-block;
}
Display:inline; should have worked
you might need to include a screenshot... but try removing the padding on the grid-item class as well as adjusting the grid-gap. also keep in mind that default styling for most browsers includes margin and padding on most items.
i thing it's grid-gap remove this style
.grid-container {
grid-gap: 0;
}
h1, p {
margin: 0;
}
than working fine https://jsfiddle.net/z7y2qaa7/
I've made a grid template with properties of grid-template and columns and rows. But when I try to open it with Chrome or Mozilla on Mac it stay with one columns.. and not with the layout that I've made.
What I'm doing wrong?
.grid {
content: '';
clear: both;
display: grid;
grid-template-columns: 43% 57%;
}
.col-1 {
grid-column:1;
grid-row: 1;
background: red;
height: 50px;
}
.col-2 {
grid-column:2;
grid-row: 1;
background: blue;
}
.col-3 {
grid-column-start: 1;
grid-column-end: 3;
grid-row: 2;
background: green;
}
<div class="grid">
<div class="col-1">
Column 1 - Row 1
</div>
<div class="col-2">
Column 2 - Row 1
</div>
<div class="col-3">
Column 1 and 2 - Row 2
</div>
</div>
can you try to put your grid class inside style tag in head. It worked for me.