Hi my css grid isn't working.. the red section fits in the first square, but the rest seem to just be out of the flow of the grid.. I'm completely new to this what am i missing?? I've tried everything but can't find the simple solution im sure..
<section class="pastevnts">
<div class="pastevents__container">
<div class="pastevents__title">
PAST EVENTS
</div>
<div class="pastevents__event">
<div class="pastevents__event-date">
17<span>Feb</span><br>2019
</div>
<div class="pastevents__event-title">
ELECTRIC LOVE PARADE
</div>
<div class="pastevents__event-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam purus in fringilla semper. In laoreet, urna ut porttitor cursus, lectus dolor ultrices ligula, sit amet tincidunt massa sem eget dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vehicula dolor
</div>
</div>
</div>
</section>
//pastevents
.pastevents {
min-height: 100vh;
background-color: #000;
&__event {
height: 200px;
width: 500px;
position: relative;
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 20% 80%;
}
&__event-date {
background-color: red;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
&__event-title {
background-color: blue;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
&__event-body {
background-color: green;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
}
I may not be sure of your question but, if you want to align your grids horizontaly like your red grid. First of all, define how many columns you want
&__event {
height: 200px;
width: 500px;
position: relative;
display: grid;
grid-template-columns: 30% 30% 40%; //If you want to divide equally : 1fr 1fr 1fr;
grid-template-rows: 20%; // You'll have to play around with this until it satisfies your needs
}
&__event-date {
background-color: red;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
&__event-title {
background-color: blue;
grid-column: 2 / span 1;
}
&__event-body {
background-color: green;
}
Related
I'm trying to create a 3-row layout (header, content, footer) using:
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%; //keep this to prevent content overflowing outside container
grid-gap: 2em;
grid-template-areas:
"header"
"content"
"footert";
I'm using align-self: end to have the footer always be at the bottom of the page.
The problem is, I want to make the footer sticky, so as the user scrolls up or down along the content, the footer always remains visible at the bottom.
If I use position: absolute or fixed though, this seems to break the footer out of the grid. Content continues to scroll over it like it wasn't there, and sometimes it also reduces the width of footer items.
Any ideas how to do this?
You could use position: sticky along with ::before pseudo-element to always keep some gap between the content and the footer.
Push the pseudo-element above the footer by translating it in negative Y-direction and then give it a background color same as that of the body. That will make it look like there's a gap between the footer and the content.
body {
margin: 0;
background: #fff;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: 30px 400px 30px;
grid-gap: 1em;
}
.header {
background: #22f;
}
.content {
background: #fc9;
}
.footer {
background: #ee1;
position: sticky;
bottom: 0;
}
.footer::before {
content: '';
position: absolute;
background: #fff;
width: 100%;
height: 1em;
transform: translateY(-100%);
}
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
Is this? Just add position: sticky and bottom:0. Also grid area is not needed.
.container {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1500px auto;
grid-template-columns: 100%;
grid-gap: 2em;
}
.header {
background: pink;
height: 50px;
}
.content {
background: aqua;
}
.footer {
background: sandybrown;
height: 50px;
position: sticky;
bottom: 0;
}
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
You can try like below:
.container {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-gap: 2em;
}
.header {
background: pink;
height: 50px;
}
.content {
background: aqua;
font-size:40px;
}
.footer {
box-shadow:0 -2em 0 0 #fff;
background: sandybrown;
height: 50px;
position: sticky;
bottom: 0;
}
body {
margin:0;
}
<div class="container">
<div class="header"></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend enim sapien. Proin facilisis ornare mi, ut eleifend odio dictum vestibulum. Pellentesque arcu ex, vehicula eget porta at, maximus ac massa. In hac habitasse platea dictumst. Sed ultrices et massa a ultrices. Pellentesque scelerisque, neque vitae semper bibendum, risus dolor suscipit felis, id porttitor nisi justo et lectus. Mauris interdum ligula imperdiet nunc ornare, </div>
<div class="footer"></div>
</div>
On my website, I want to assign the .about class grid-columns: 1/4; while for the .about h1 element, I want that to be in grid-column: 3/4 and the .about p element to be in grid-column: 1/2;
I have already tried to the needed lines to the child elements in my css file but nothing seems to change on the site when I do.
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto minmax(min-content, 30vh) minmax(min-content, 20vh) 1fr 1fr 1fr 1fr;
background: gray;
/* grid-gap: 10px; */
}
/* about */
.about {
grid-column: 1/4;
padding: 3rem 1rem 1.25rem;
background: #ffffff;
}
.about h1 {
grid-column: 3/4;
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 1.5rem;
color: #1a202c;
}
.about p {
grid-column: 1/2;
font-weight: 100;
margin: 0.5rem 0 0 0;
font-size: 1rem;
color: #4a5568;
}
.btn {
cursor: pointer;
outline: none;
font-size: 1rem;
color: #ffffff;
background: #38b2ac;
transition: 0.35s;
padding: 0.7rem 1rem;
margin: 2rem 0.25rem 1rem 0.75rem;
border: none;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
}
<div class="container">
<section class="hero">
<h1>Lorem text</h1>
<button class="btn">learn now</button>
<button class="rev btn">about us</button>
</section>
<section class="about">
<h1>Who we are</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis lacus vitae ipsum laoreet, nec vulputate leo euismod. Aliquam id nunc ut ipsum gravida iaculis. Morbi sit amet rhoncus justo. Quisque maximus eros eget feugiat blandit. Proin pharetra purus in urna ornare imperdiet. Donec convallis tortor nec aliquet blandit. Donec id imperdiet mi.
</p>
<button class="btn">read more</button>
</section>
With css grid, only direct children of the parent element can be arranged. Since div.container has display: grid, only section.hero and section.about can be placed in grid areas.
You can use display: contents to "flatten" the tree., making the <h1> and <p> elements accessible to your grid layout.
.about {
display: contents;
}
Now, on the css level, you have four children of div.container: div.hero and all three children of div.about (<h1>,<p>, and <button>). That means you'll have to place the <button> element, which you haven't done in your code.
Otherwise, you'll need to rethink your markup/layout.
I recommend reading [CSS Tricks' A Complete Guide to Grid][1].
Hi I'm struggling with this issue.
Desktop:
Div A
Div B
But in responsive the divs have to change their position like this:
Responsive:
Div B
Div A
I made a jsfiddle:
#a {
height: 50px;
width: 100%;
background-color: red;
}
#b {
height: 50px;
width: 100%;
background-color: green;
}
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
Is this possible?
You can use grid-row from CSS grid layout
section {
display: grid;
grid-auto-rows: minmax(50px, auto)
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
#b {
grid-row: 1
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
Alternatives:
use order with also CSS grid layout
section {
display: grid;
grid-auto-rows: minmax(50px, auto)
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
#b {
order: -1
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
use column-reverse from flexbox layout (as suggested by #G-Cyr in comments below)
section {
display: flex;
flex-direction: column;
}
div {
height: 50px;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
section {
flex-direction: column-reverse;
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
use flex-wrap/wrap-reverse with flexbox layout
section {
display: flex;
flex-wrap: wrap
}
div {
height: 50px;
flex: 0 100%
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
section {
flex-wrap: wrap-reverse
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
use order with flexbox layout
section {
display: flex;
flex-direction: column;
}
div {
height: 50px;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
#b {
order: -1
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
If you need to support older browsers, you can do it this way as well. But this only works if the elements have a fixed height, otherwise you will have to play some other games.
#a {
height: 50px;
width: 100%;
background-color: red;
}
#b {
height: 50px;
width: 100%;
background-color: green;
}
#media (max-width:768px) {
#a {
position: relative;
top: 50px;
}
#b {
position: relative;
top: -50px;
}
}
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
Here is another answer with 2 selector and a single rule :transform:scale(-1);
/* target the container and its direct-child */
div,
div>* {
transform: scale(-1);
}
#media (min-width:768px) {
div,
div>* {
transform: scale(1);
}
#a del {
text-decoration: none;
}
#a ins {
display: none;
}
<div>
<h1 id="a">HTML Ipsum Present<del>s</del><ins>ed</ins></h1>
<p id="b"><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
I’m using Flexbox to align the height of two adjacent columns, which works. I now need to vertically center the inner content within the flex box columns without using fixed heights. Additionally this all needs to work within Bootstrap 3. Please see code below:
.row-flex,
.row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex: 0;
}
.row-flex > div[class*='col-'],
.container-flex > div[class*='col-'] {
margin: -.2px;
/* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,
.row-flex > div[class*='col-'] div {
width: 100%;
}
.flex-col {
display: flex;
display: -webkit-flex;
flex: 1 100%;
flex-flow: column nowrap;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
.content {
border: 1px solid black;
padding: 20px;
}
.content-inner {
border: black solid 1px;
padding: 20px;
}
.img {
width: 100px;
height: auto;
display: block;
margin: 0 auto;
}
figcaption {
text-align: center;
}
[class*="col-"] {
padding: 0;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-xs-7">
<div class="content">
<div class="content-inner">
<figure>
<img class="img" src="http://i80.photobucket.com/albums/j182/swiftian/headersnstuff/sidebar_zaius.jpg" alt="Macaque in the trees">
<figcaption>Dr. Zaius</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="content">
<div class="content-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
</div>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
<hr>
JS FIDDLE
https://jsfiddle.net/baydbzbn/1/
Appreciate any help.
Add this to your .content class CSS definition
display: flex;
align-items: center;
I'm trying to achieve Pinterest-like layout, but with items of different percentage widths. Expected behaviour is pretty much like Javascript masonry plugin.
My flexbox code for some reason does not nake flexbox items jump side-by-side to another, event, when exact space is available.
Illustration of what I'm trying to achieve
demo on jsfiddle
https://jsfiddle.net/31v7et9f/1/
html
<div class="masonry">
<div class="item-1-4">item 25%</div>
<div class="item-1-1">item 100%</div>
<div class="item-3-4">item 75%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-1">item 100%</div>
</div>
css
* {box-sizing: border-box;}
/* parent */
.masonry {
display: flex;
flex-flow: column;
}
/* childs */
.masonry > div {
background: gray;
outline: solid 1px black;
height: 100px;
}
/* child sizes */
.item-1-1 {width: 100%;}
.item-3-4 {width: 75%;}
.item-1-2 {width: 50%;}
.item-1-4 {width: 25%;}
Flexbox items are by default layed out in the order they appear in the html. So, using your html and using flex-flow: row wrap; you'll get your 2 50%s side by side, but not your 75% and 25%.
/* parent */
.masonry {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
You could rearrange your html (do some math in javascript to determine which order they should be in to tile).
<div class="masonry">
<div class="item-1-1">item 100%</div>
<div class="item-1-4">item 25%</div>
<div class="item-3-4">item 75%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-2">item 50%</div>
<div class="item-1-1">item 100%</div>
</div>
You could also use order to group items that should be able to tile, though it's not perfect
/* child sizes */
.item-1-1 {
width: 100%;
-webkit-order: 1;
order: 1;
}
.item-3-4 {
width: 75%;
-webkit-order: 2;
order: 2;
}
.item-1-2 {
width: 50%;
-webkit-order: 3;
order:3;
}
.item-1-4 {
width: 25%;
-webkit-order: 2;
order:2;
}
https://jsfiddle.net/31v7et9f/2/
We can use flex-wrap: wrap; align-items: flex-stat; in parent flex class and child we can use flex: 1 auto; so that it consider available space and align automatically.
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-stat;
}
.fill-height-or-more
div {
flex: 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.some-area
div {
padding: 1rem;
}
.some-area
div:nth-child(1) {
background: rgba(136, 204, 102, 1);
}
.some-area
div:nth-child(2) {
background: rgba(121, 181, 210, 1);
}
.some-area
div:nth-child(3) {
background: rgba(140, 191, 217, 1);
}
.some-area
div:nth-child(4) {
background: rgba(159, 202, 223, 1);
}
.some-area
div:nth-child(5) {
background: rgba(179, 213, 230, 1);
}
.some-area
div h1, .some-area
div h2 {
margin: 0 0 0.2rem 0;
}
.some-area
div p {
margin: 0;
}
html, body {
height: 100%;
}
<section class="some-area fill-height-or-more">
<div>
<h1>Boxes That Fill Height (or more)</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div>
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div>
<h2>Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div>
<h2>Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div>
<h2>Five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
</section>