Any idea of how to make this grid responsive?
This is my CSS:
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 100px 100px 100px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: 1 / 3;
grid-row: 1;
}
.b {
grid-column: 3 ;
grid-row: 1 / 3;
}
.c {
grid-column: 1 ;
grid-row: 2 ;
}
.d {
grid-column: 2;
grid-row: 2;
}
HTML
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
</div>
I tried this code:
#media only screen and (max-width:500px) {
.box {
width: 100%;
margin-right: 0;
float: none;
margin-bottom: 20px !important;
}
What's the best way to accomplish this?
I agree with #Petra that you need to use fr, but use a media query if you want to display them stacked on a mobile device. You could also just change the display to block. Make sure you add these after the initial CSS so that it isn't overridden.
#media screen and (max-width: 512px) {
.wrapper {
grid-template-columns: 1fr;
}
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
background-color: #fff;
color: #444;
}
ith CSS Grid Layout, we get a new flexible unit: the Fr unit. Fr is a fractional unit and 1fr is for 1 part of the available space.
Related
This question already has answers here:
Why does the order of media queries matter in CSS?
(2 answers)
Closed 9 months ago.
I want the second column that take the entire two rows on full screen, to drop down so the grid only contains one column with 4 rows(1st row being the title of the section, second being the description, and the third and fourth rows the skills) I tried a lot of different stuff but yet non of them make the grid actually drop to 1 column when i resize.
<div class="grid-container">
<div class="p-1">
<span class="heading">My Journey So Far</span>
</div>
<div class="skill-col-container">
<div class="skill-container">
<div class="skills">Java</div>
<div class="skills">UI</div>
<div class="skills">CSS</div>
<div class="skills">UX</div>
<div class="skills">HTML</div>
<div class="skills">GIT</div>
<div class="skills">LINUX</div>
<div class="skills">ADOBE</div>
</div>
</div>
<div class="p-3">
<p>
Always up for a challenge, I have worked for lean start-ups and was a
member of the first New Zealand start-up to attend Y Combinator, the
largest start-up accelerator in the world. From there, I worked my way
up to Art Director and Team Lead at Appster where I oversaw the design
of 30+ mobile and desktop apps. Currently, I lead UI/UX design at SaaS
start-up VideoMyJob.
</p>
</div>
</div>
.heading {
font-size: 2.75rem;
font-weight: 500;
}
.grid-container {
display: grid;
grid-template-columns: 50% 20%;
grid-row-gap: 1rem;
grid-column-gap: 3rem;
margin-left: 5%;
margin-bottom: 8rem;
}
#media only screen and (max-width: 768px) {
.grid-container {
display: grid;
grid-template-columns: 50%;
grid-template-rows: 1ft 1fr 1fr 1fr;
}
.skill-col-container {
grid-column-start: 1;
grid-row-start: 4;
}
}
.skill-col-container {
grid-row-start: 1;
grid-row-end: 3;
grid-column: 2;
}
.skill-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 20px;
}
.skills {
text-transform: uppercase;
display: inline-block;
border: solid;
border-radius: 1px;
border-color: black;
width: 5rem;
display: flex;
justify-content: center;
border-radius: 3.75rem;
background-color: #ec9b3b;
}
.p-3 {
grid-column: 1;
}
Just put your #media at the end of your file. Media queries add no specificity to the selectors they contain, but source order still matters.
You can also refer here: Why does the order of media queries matters in CSS
.heading {
font-size: 2.75rem;
font-weight: 500;
}
.grid-container {
display: grid;
grid-template-columns: 50% 20%;
grid-row-gap: 1rem;
grid-column-gap: 3rem;
margin-left: 5%;
margin-bottom: 8rem;
}
.skill-col-container {
grid-row-start: 1;
grid-row-end: 3;
grid-column: 2;
}
.skill-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 20px;
}
.skills {
text-transform: uppercase;
display: inline-block;
border: solid;
border-radius: 1px;
border-color: black;
width: 5rem;
display: flex;
justify-content: center;
border-radius: 3.75rem;
background-color: #ec9b3b;
}
.p-3 {
grid-column: 1;
}
#media only screen and (max-width: 768px) {
.grid-container {
display: grid;
grid-template-columns: 50%;
grid-template-rows: 1ft 1fr 1fr 1fr;
}
.skill-col-container {
grid-column-start: 1;
grid-row-start: 4;
}
}
index.html
This is the index file with a hero image and hero content(title and subtitle)
<section class= 'container main-section grid'>
<div class="hero-content">
<div class="title">
<h1>Hi, I'm Megha</h1>
</div>
<div class="subtitle">
<p>I’m a software engineer, where I like spending my day with programming and a bit of designing in general.</p>
</div>
</div>
<div class='image-wrapper'>
<div class='girl-image'></div>
</div>
styles.css
Code for overlapping hero content and hero image using CSS grid.
.grid {
display: grid;
grid-template-columns: 2fr 2fr 1fr 1fr;
grid-template-rows: 1fr 2fr;
margin-top: 80px;
gap: 20px;
}
.hero-content {
grid-column: 1 / span 2;
grid-row: 2 / span 2;
z-index: 1;
margin-top: -50px;
align-content: center;
max-width: 80vh;
}
.hero-content .title {
font-family: blackjack;
font-size: 24px;
color: #16161D;
}
.hero-content .subtitle {
font-family: futurapt;
font-size: 22px;
color: #363636
}
.image-wrapper {
grid-column: 2/span 3;
grid-row: 1/span 2;
}
index.css
Code for changing responsive layout with hero content on top and image on the bottom.
#media only screen and (max-width: 1249px) {
header, .hero-content, .social-icons, .image-wrapper {
margin: 0 20px;
}
}
#media only screen and (max-width: 535px) {
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 2fr 2fr;
}
.hero-content {
grid-column: 1;
grid-row: 1 / span 2;
}
.image-wrapper {
grid-column: 1;
grid-row: 3 / span 4;
}
}
The code does not work for responsive design for max-width 535px. I've been looking for a long while. Any help would be much appreciated.
Basically I want to change layout for mobile with a single column and 4 rows. This doesn't work. Why??
I've added a bit of CSS to your girl-image class so we could visualize where it currently lands in your grid. Your hero content DOES overlap your hero image at higher viewport widths. But on mobile, the hero image is under your hero content.
.girl-image {
background-color: cornflowerblue;
height: 100%;
width: 100%;
}
This is what your mobile layout looks like right now:
If you go above 535px, you get the image below:
.grid {
display: grid;
grid-template-columns: 2fr 2fr 1fr 1fr;
grid-template-rows: 1fr 2fr;
margin-top: 80px;
gap: 20px;
}
.hero-content {
grid-column: 1 / span 2;
grid-row: 2 / span 2;
z-index: 1;
margin-top: -50px;
align-content: center;
max-width: 80vh;
}
.hero-content .title {
font-family: blackjack;
font-size: 24px;
color: #16161d;
}
.hero-content .subtitle {
font-family: futurapt;
font-size: 22px;
color: #363636;
}
.image-wrapper {
grid-column: 2 / span 3;
grid-row: 1 / span 2;
}
.girl-image {
background-color: cornflowerblue;
height: 100%;
width: 100%;
}
#media only screen and (max-width: 1249px) {
header,
.hero-content,
.social-icons,
.image-wrapper {
margin: 0 20px;
}
}
#media only screen and (max-width: 535px) {
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 2fr 2fr;
}
.hero-content {
grid-column: 1;
grid-row: 1 / span 2;
}
.image-wrapper {
grid-column: 1;
grid-row: 3 / span 4;
}
}
<section class='container main-section grid'>
<div class="hero-content">
<div class="title">
<h1>Hi, I'm Megha</h1>
</div>
<div class="subtitle">
<p>I’m a software engineer, where I like spending my day with programming and a bit of designing in general.</p>
</div>
</div>
<div class='image-wrapper'>
<div class='girl-image'></div>
</div>
</section>
I just started learning the CSS grid today, and I can start seeing the point to use this awesome css classes. But one thing that really is confusing me, is how to reorganize the grid on mobile devices.
I made an example below here. That is working how it should on a desktop view. When the screen size is going below 991px. I would like the grid was looking like this:
But how should I control that using the CSS grid?
.wrapper {
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-auto-rows:minmax(100px,auto);
grid-gap:1em;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.box1 {
grid-column:1/3;
grid-row:1/3;
}
.box2 {
grid-column:3;
}
.box3 {
grid-column:3;
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
You should use #media and you need to make again adjustments for 991px.
.wrapper {
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-auto-rows:minmax(100px,auto);
grid-gap:1em;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.box1 {
grid-column:1/3;
grid-row:1/3;
}
.box2 {
grid-column:3;
}
.box3 {
grid-column:3;
}
#media screen and (max-width:991px){
.wrapper {
grid-template-columns:1fr 1fr;
}
.box1 {
grid-column:1/4;
grid-row:1/3;
}
.box2 {
grid-column:1/2;
}
.box3 {
grid-column:2/4;
}
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
You can use media queries with #media only screen and (max-width: 990px) -
you can use a two-column grid using grid-template-columns: 1fr 1fr for this view - see demo below:
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
}
.wrapper>div {
background-color: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background-color: #ddd;
}
.box1 {
grid-column: 1/3;
grid-row: 1/3;
}
.box2 {
grid-column: 3;
}
.box3 {
grid-column: 3;
}
#media only screen and (max-width: 990px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
.box1 {
grid-column: span 2; /* span the first row */
grid-row: 1; /* first row */
}
.box2 {
grid-column: 1; /* first column */
}
.box3 {
grid-column: 2; /* second column */
}
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
The cart form is stretching vertically and the thumbs are positioning in the bottom left corner, when I'd like them to sit directly under the cart form like so:
.product-page--main-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 1fr auto;
}
.product-page--main-content>* {
padding: 50px 100px;
border: 1px solid #ccc;
}
.product-page--cart-form-block {
grid-row: 2;
}
.product-page--thumbs {
grid-row: 3;
}
.product-page--images {
grid-column: span 2;
grid-row: span 3;
height: 400px;
}
.product-page--description {
grid-row: span 3;
}
<div class="product-page--main-content">
<div class="product-page--title-n-vendor">Title</div>
<div class="product-page--cart-form-block">Cart form</div>
<div class="product-page--thumbs">Thumbs</div>
<div class="product-page--images">Images</div>
<div class="product-page--description">Description</div>
</div>
Codepen: https://codepen.io/paulmason/pen/rYXyYW
The code you have is working perfectly, as written.
Your image grid item is set to height: 400px.
.product-page--images {
grid-column: span 2;
grid-row: span 3;
height: 400px;
}
Then you have 50px in top and bottom padding.
.product-page--main-content > * {
padding: 50px 100px;
border: 1px solid #ccc;
}
So the image grid item is 500px tall, in a row set to 1fr, in a grid with three rows. It all works perfectly, as specified.
Maybe what you want is four rows:
.product-page--main-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* grid-template-rows: auto 1fr auto; */ /* now defaults to grid-auto-rows: auto */
}
.product-page--main-content > * {
padding: 50px 100px;
border: 1px solid #ccc;
}
.product-page--cart-form-block {
grid-row: 2;
}
.product-page--thumbs {
grid-row: 3;
}
.product-page--images {
grid-column: span 2;
grid-row: span 4; /* changed from 3 */
height: 400px;
}
.product-page--description {
grid-row: span 4; /* changed from 3 */
}
<div class="product-page--main-content">
<div class="product-page--title-n-vendor">Title</div>
<div class="product-page--cart-form-block">Cart form</div>
<div class="product-page--thumbs">Thumbs</div>
<div class="product-page--images">Images</div>
<div class="product-page--description">Description</div>
</div>
I'm not sure this is what you're asking but this seems to fit: change
grid-template-rows: auto 1fr auto;
to
grid-template-rows: 3;
This question already has answers here:
Create a Masonry grid with flexbox (or other CSS)
(3 answers)
Closed 5 years ago.
Consider this example:
Notice that that 4th item is pushed to top instead of aligning with the 3rd item. I can't achieve this using flexbox's align-items: flex-end, neither with floats.
I am aware of achieving this by using masonry/isotope, but I would like to avoid using javascript just for this layout.
Is it possible to achieve using only CSS?
Yes, it's possible via CSS Grid Layout:
.grid {
display: grid;
grid-gap: 10px 30px;
grid-template-rows: auto 1fr auto;
}
/* styles just for demo */
.grid__item {
background-color: #e0e0e0;
font-size: 30px;
padding: 10px;
}
.b, .d {
align-self: flex-start;
}
.a {
grid-row: 1 / span 2;
/* setting height just for demo */
height: 200px;
}
.b {
grid-column: 2;
}
.c {
grid-row: 3;
}
.d {
grid-column: 2;
}
<div class="grid">
<div class="grid__item a">1</div>
<div class="grid__item b">2</div>
<div class="grid__item c">3</div>
<div class="grid__item d">4</div>
</div>
If you need IE\Edge support you should use old grid syntax. You can fake grid-gap using additional grid columns and rows. Demo:
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 30px 1fr;
-ms-grid-rows: auto 10px 1fr 10px auto;
grid-template-rows: auto 10px 1fr 10px auto;
}
/* styles just for demo */
.grid__item {
background-color: #e0e0e0;
font-size: 30px;
padding: 10px;
}
.b, .d {
-ms-grid-row-align: start;
align-self: flex-start;
}
.a {
-ms-grid-row-span: 3;
grid-row: 1 / span 3;
/* setting height just for demo */
height: 200px;
}
.b {
-ms-grid-column: 3;
grid-column: 3;
}
.c {
-ms-grid-row: 5;
grid-row: 5;
}
.d {
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 3;
grid-row: 3;
}
<div class="grid">
<div class="grid__item a">1</div>
<div class="grid__item b">2</div>
<div class="grid__item c">3</div>
<div class="grid__item d">4</div>
</div>