I'm making a grid with 3 columns and 3 rows everything works fine but it's not responsive I tried to use media queries but it looks like this.
any solutions?
<div class="projectPhotos">
<div class="_a p1">1</div>
<div class="_a p2">2</div>
<div class="_a p3">3</div>
<div class="_a p4">4</div>
<div class="_a p5">5</div>
<div class="_a p6">6</div>
<div class="_a p7">7</div>
</div>
._a{
width:220px;
height:120px;
background:gray;
border: 1px solid #fff;
font-size: 30px;
text-align: center;
color:white;
margin: auto;
}
.projectPhotos{
display: grid;
grid-template-columns: auto auto auto;
box-sizing: border-box;
grid-gap: 40px 60px;
box-sizing: border-box;
}
#media only screen and (max-width: 600px) {
.projects{
width:350px;
}
.projectPhotos{
grid-gap:10px 10px;
}
.projectPhotos ._a{
width:300px;
height:100px;
}
}
I suppose that when you use grid-template-columns: auto auto auto; this means that you'll always have a grid with 3 columns.
What I suggest to make this responsive is just apply "grid-template-columns" into your media query like this, for example:
#media only screen and (max-width: 600px) {
.projects{
width:350px;
}
.projectPhotos{
grid-template-columns: auto;
grid-gap:10px 10px;
}
.projectPhotos ._a{
width:300px;
height:100px;
}
}
This way you are setting that your grid will have only one column when the media query is true.
hi you need to use this repeat(auto-fit, minmax(220px, 1fr)) in css grid in order to achieve responsiveness without media queries, if you use repeat(auto-fit, 1fr)) or repeat(auto-fit, auto) or repeat(auto-fit, minmax(auto, 1fr)) will act as an div block level elements and never allow other items (sibblings) to get placed next to them, so i highly recommend you to use repeat(auto-fit, minmax(width of the items , 1fr)) or repeat(0, minmax(220px, 1fr)) or repeat(auto-fit, minmax(220px, 1fr)) to force the grid items to give the space for its sibbling items to sit after them ,.
PLEASE DO SEE MY UPCOMMING ANSWER AFTER THIS FOR BETTER EXPLANATION
NOTE: 1FR WILL ACT LIKE AN BLOCK LEVEL ELEMENT , AUTO WILL COVER TILL THE CONTENT SIZE
DECLARE THE WIDTH OF THE ITEMS INSIDE THE grid-template-columns or grid-auto-columns ONLY IN grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); OR grid-template-columns: repeat(auto-fit,220PX); ** NOT SEPERATELY
DECLARE THE WIDTH OF THE ITEMS INSIDE THE grid-template-rows or grid-auto-rows
code sand box link https://codesandbox.io/s/fixed-solution-css-grid-is-not-responsive-8mdow?file=/style.css
You can set grid-template-columns to auto, so on each row will be one element.
._a{
width:220px;
height:120px;
background:gray;
border: 1px solid #fff;
font-size: 30px;
text-align: center;
color: white;
margin: auto;
}
.projectPhotos{
display: grid;
grid-template-columns: auto auto auto;
box-sizing: border-box;
grid-gap: 40px 60px;
box-sizing: border-box;
}
#media only screen and (max-width: 600px) {
.projects{
width:350px;
}
.projectPhotos{
grid-gap:10px 10px;
grid-template-columns: auto;
}
.projectPhotos ._a{
width:300px;
height:100px;
}
}
<div class="projectPhotos">
<div class="_a p1">1</div>
<div class="_a p2">2</div>
<div class="_a p3">3</div>
<div class="_a p4">4</div>
<div class="_a p5">5</div>
<div class="_a p6">6</div>
<div class="_a p7">7</div>
</div>
css grid replaces the width with grid-template-columns and height with
grid-template-rows
so, instead of using width:220px; use grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); or grid-template-columns: repeat(auto-fit, 220px);
Replace height height:120px; with this grid-auto-rows: 120px;,
So, try to understand the use case of css grid and replace the css properties according to the new feature of css.
._a {
background: gray;
border: 1px solid #fff;
font-size: 30px;
text-align: center;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.projectPhotos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-auto-rows: 120px;
grid-gap: 40px 60px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Static Template</title>
</head>
<body>
<div class="projectPhotos">
<div class="_a p1">1</div>
<div class="_a p2">2</div>
<div class="_a p3">3</div>
<div class="_a p4">4</div>
<div class="_a p5">5</div>
<div class="_a p6">6</div>
<div class="_a p7">7</div>
</div>
</body>
</html>
Related
I've been trying to figure out how to make this layout possible in CSS Flexbox, so far cannot figure out a way to make it work that doesn't involve hiding a duplicate to show only on desktop. Is this possible to do using Flexbox?
Image example of what I'm trying to achieve:
A solution in grid would be a lot nicer and this is a working example the breakpoint for mobile version happens in 800px,
I suggest you read the Grid Area Template system it make these kind of layouts in very modern and nice way
.parent{
width: 100%;
height:100vh;
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "blue red""blue red""green green";
gap: 10px;
}
.blue{
grid-area: blue;
width: 200px;
background: blue;
}
.red{
grid-area: red;
width: 100%;
background: red;
}
.green{
grid-area: green;
width: 100%;
height: 100%;
background: green;
}
#media screen and (max-width: 800px){
.parent{
grid-template-areas: "blue red"
"blue green";
grid-template-rows: 1fr 1fr;
}
}
<div class="parent">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
I have five rows in a grid layout.
There is a header row at the top.
I want the content row to fill everything it can of the available space.
I want the footer row to be at the bottom.
Between the header, content and footer rows I have two rows which just adds height spacing at 15px.
Here is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="headerRow">
<div>Title</div>
<div>Fill</div>
<div>Image</div>
</div>
<div style="height: 15px;"></div>
<div>
content
</div>
<div style="height: 15px"></div>
<div class="footerRow">
<div>foo</div>
<div>bar</div>
</div>
</body>
</html>
Here is my CSS-code:
.body {
margin: 15px;
background: lime;
display: grid;
grid-template-rows: auto auto 1fr auto auto;
}
.headerRow {
display: grid;
grid-template-columns: auto 1fr auto;
background-color: #2196F3;
}
.footerRow {
display: grid;
grid-template-columns: auto auto;
background-color: red;
}
I got my "headerRow" to show three columns with the middle column to fill every available space with this line in the CSS:
grid-template-columns: auto 1fr auto;
So I tried this line in the .body-block in my CSS:
grid-template-rows: auto auto 1fr auto auto;
But that didn't work :'(
What is the problem?
Maybe like this:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
margin: 15px;
background: lime;
display: grid;
grid-row-gap: 15px;
align-content: space-between;
height: 100%;
}
.headerRow {
display: grid;
grid-template-columns: auto 1fr auto;
background-color: #2196F3;
justify-items: center;
}
.footerRow {
display: grid;
grid-template-columns: auto auto;
background-color: red;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<div class="container">
<head>
<title>App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="headerRow">
<div>Title</div>
<div>Fill</div>
<div>Image</div>
</div>
<div>
content
</div>
<div class="footerRow">
<div>foo</div>
<div>bar</div>
</div>
</div>
</body>
</html>
Why not use hr tag for adding space instead of another rows. Also if you want to make the three columns inside headerRow, Try adding float : left or adding columns from bootstrap would solve your problem.
I have some follow up questions after trying #Nikola Pavicevic solution:
Question 1:
In the html, body CSS-block the height: 100% seems to do the trick for me.But it makes the page in my web browser to have a vertical scrollbar.This scrollbar seems to be needed to show the "footer"-row.Is there anyway to decrease the height of the content row so the header row and footer row is always displayed?
Question 2:
The "content-row" seems to not fill all space available in the page.
I can see this by putting a background in the "content-row".
Is there a way to make sure the "content-row" fills all available space?
But keeps the "header-row" and "footer-row" visible.
Updated HTML:
<!DOCTYPE html>
<html lang="en">
<div class="container">
<head>
<title>App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="headerRow">
<div>Title</div>
<div>Fill</div>
<div>Image</div>
</div>
<div class="spacerRow"></div>
<div class="contentRow">
content
</div>
<div class="spacerRow"></div>
<div class="footerRow">
<div>foo</div>
<div>bar</div>
</div>
</div>
</body>
</html>
Updated CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
margin: 15px;
background: lime;
display: grid;
align-content: space-between;
height: 100%;
}
.headerRow {
display: grid;
grid-template-columns: auto 1fr auto;
background-color: #2196F3;
justify-items: center;
}
.footerRow {
display: grid;
grid-template-columns: auto auto;
background-color: red;
justify-content: space-between;
}
.spacerRow {
height: 15px;
background-color: yellow;
}
.contentRow {
background-color: purple;
}
At first, all items in the grid are in the same size i want it to be
But after clicking the 'Load More' button, the height for the new items are not the same:
Example here
I want to make those items the same height as shown in the first image, but I'm not sure how
my html
<div>
<Title message={"Your Top Artists"}/>
<div className="topArtists">
{toDisplay.map(item=>{
return(
<div className="items">
<li className="items-li" onClick={(e) => handleClick(e, item)}>
<Link to={`${path}/artist/${item.id}`}>
{item.name}, {item.followers}, {item.genres}, {item.popularity}
</Link>
</li>
</div>
)
})}
</div>
<button onClick={loadMore}> Load More </button>
</div>
And my Css
.topArtists{
/*width: 100%;*/
display: grid;
grid-template-rows: repeat(3, 250px);
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 15px;
}
.items {
border: 1px solid red;
}
.items-li{
padding: 10px;
font-size: 25px;
list-style: none;
}
Currently, you have set height for only 3 first rows. Use grid-auto-rows instead
.topArtists{
display: grid;
grid-auto-rows: 250px;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 15px;
}
I am trying to combine CSS grid with position in order to have my page effectively adjust to different screen sizes. My thinking is to have one grid design for mobile and one for desktop using #media(screen-width).
My thinking would be to have the grid blocks be driven by grids and have the content in the grid blocks be driven by position.
Now my understanding is that grid would create a imaginary rectangle based on the columns and rows and that when i use position that it would latch on to the one corner of the grid block.
Question
01 Where is my misunderstanding of this concept?
02 Are there better ways to do this?
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid</title>
<style>
.wrapper_main {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
justify-items: stretch;
align-items: stretch;
}
.box0 {
grid-column: 1/6;
grid-row: 1;
border: 1px solid #333;
}
.box1 {
grid-column: 1/6;
grid-row: 2/6;
border: 1px solid #333;
}
.seconds01 {
position: fixed;
right: 20px;
top: 50px;
}
.seconds05 {
position: fixed;
right: 100px;
top: 50px;
}
</style>
</head>
<body>
<div class="wrapper_main">
<div class="box box0">Box 0</div>
<div class="box box1">
<a class="seconds01"><img src="img/Candle_Box_Tag.png"></a>
<a class="seconds05"><img src="img/Candle_Box_Tag.png"></a>
</div>
</div>
</body>
</html>
What i'm getting.
What i want.
Be aware when you positioning the element. When you apply position:fixed; its won't respect it parent containers it will strictly stick to the viewport's view.
Perhaps you can try with position:absolute; to the child element and give position:relative; to its parent container so that it will be in its parent container
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid</title>
<style>
.wrapper_main{
display:grid;
grid-template-columns:repeat(5, 1fr);
grid-auto-rows:minmax(100px, auto);
grid-gap:1em;
justify-items:stretch;
align-items:stretch;
}
.box0{
grid-column:1/6;
grid-row:1;
border:1px solid #333;
}
.box1{
grid-column:1/6;
grid-row:2/6;
border:1px solid #333;
position:relative;
}
.seconds01{
position:absolute;
right:20px;
top:50px;
}
.seconds05{
position:absolute;
right:100px;
top:50px;
}
</style>
</head>
<body>
<div class="wrapper_main">
<div class="box box0">Box 0</div>
<div class="box box1">
<a class="seconds01"><img src="img/Candle_Box_Tag.png"></a>
<a class="seconds05"><img src="img/Candle_Box_Tag.png"></a>
</div>
</div>
</body>
</html>
I've been playing around with CSS Grid recently and have noticed something that I can't see to find the answer to. Let's say I split my page out to have 2 columns, and then a row below it, with another column (which spans both columns). On mobile, I'd like them to stack one on top of the other and then go back to layout described above after a certain breakpoint. Here is the markup:
HTML
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>
SCSS
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
background-color:grey;
grid-gap:10px;
#media only screen and (max-width:800px) {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.lower {
grid-template-columns: 1fr;
grid-template-rows:auto;
background-color: green;
grid-gap:10px;
}
I've noticed that on mobile, even though I've defined grid-gap for both of my grid sections, on mobile when the columns stack, the grid-gap is not maintained. So in the fiddle below, when you make the window smaller, you can see that when the columns, stack one on top of the other, the gap between B and C is non existent. Here is the fiddle:
Fiddle
Hope I'm making sense!
EDIT: Bear in mind I'm only testing this in Firefox and Chrome (which support grid).
The grid-gap rule doesn't work between B and C because it doesn't apply.
This rule creates gutters between rows and columns inside a grid container.
But you are declaring grid-gap on .upper and .lower, two siblings in a block container. Their parent (.grid) is not a grid container because it doesn't have display: grid or inline-grid.
Therefore, grid-gap: 10px on .upper is creating a 10px gutter between A and B...
and grid-gap: 10px on .lower is creating a 10px gutter between.... nothing (.lower has only one grid item. grid-gap creates gutters between multiple grid items).
fiddle demo 1
For grid-gap to work among the .upper and .lower siblings you need to apply it to their parent, which must be a grid container.
fiddle demo 2
.grid {
display: grid; /* NEW */
grid-gap: 25px; /* NEW */
}
.upper, .lower {
display: grid;
}
.upper {
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
.lower {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 10px; /* does nothing unless there are multiple grid items */
}
#media ( max-width:800px ) {
.upper {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.upper > * { border: 1px dashed red; }
.lower > * { border: 1px dashed blue; }
<div class="grid">
<div class="upper">
<div class="a">A</div>
<div class="b">B</div>
</div>
<div class="lower">
<div class="c">C</div>
</div>
</div>