I have a grid that has 5 columns. I want my grid to have maximum of 5 columns of 1fr but if i make my window smaller, i want my columns to be below each other.
I noticed this works
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
However, when I increase my window, the grid column goes over by 5. How do i limit my column to be maximum of 5 columns?
Thank you
You can use grid-template-columns: repeat(5, minmax(150px, 1fr));
to make responsive on smaller screens and display columns accordingly
#media (max-width: 540px) {
#grid {
grid-template-columns: repeat(1, minmax(150px, 1fr));
}
}
#grid {
display: grid;
width: 100%;
grid-template-columns: repeat(5, minmax(150px, 1fr));
}
#areaA {
background-color: lime;
}
#areaB {
background-color: yellow;
}
#media (max-width: 600px) {
#grid {
grid-template-columns: repeat(1, minmax(150px, 1fr));
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="grid">
<div id="areaA">A</div>
<div id="areaB">B</div>
<div id="areaE">A</div>
<div id="areaF">B</div>
<div id="areaG">A</div>
<div id="areaH">B</div>
<div id="areaI">A</div>
<div id="areaJ">B</div>
</div>
</body>
</html>
Related
I want to make a responsive layout with one column on mobile and two columns on desktop.
In very old article on web the author uses javascript, but I guess with modern browsers you can only do this with css.
Responsive layout
The best result I've been able to achieve so far is with the following code, but in desktop mode I can't place the sidebar items one behind the other.
I think grid layout is not the right approach.
.container {
display: grid;
grid-template-columns: auto auto;
}
.main {
background-color: blue;
grid-column: 1;
}
.sidebar {
background-color: green;
grid-column: 2;
}
#media screen and (max-width: 600px) {
.container {
grid-template-columns: auto;
}
.main, .sidebar {
grid-column: 1;
}
}
<div class="container">
<div class="main"><span>A1</span></div>
<div class="sidebar"><span>B1</span></div>
<div class="main"><span>A2</span></div>
<div class="main"><span>A3</span></div>
<div class="sidebar"><span>B2</span></div>
<div class="main"><span>C1</span></div>
</div>
Thanks to #vineet-tyagi suggestion I add below the solution which works well for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: dense;
}
.main {
background-color: blue;
grid-column: 1;
}
.sidebar {
background-color: green;
grid-column: 2;
height: fit-content;
}
#media screen and (max-width: 600px) {
.container {
grid-template-columns: auto;
}
.main, .sidebar {
grid-column: 1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="main">
A1
</div>
<div class="sidebar">
B1
</div>
<div class="main">
A2<br>A2<br>A2<br>A2
</div>
<div class="main">
A3
</div>
<div class="sidebar">
B2
</div>
<div class="main">
C1
</div>
</div>
</body>
</html>
Add "grid-auto-flow: dense;" also to the container class.
.container {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 10px;
grid-auto-rows: 100px;
}
.container .main,
.container .sidebar {
border: 1px solid black;
}
.container .sidebar {
background:red;
}
#media screen and (min-width: 600px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
.container .sidebar {
grid-column: 2 / 3;
}
.container .sidebar:nth-child(3) {
grid-row: 2 / 1;
background: red;
}
.container .main {
grid-column: 1 / 2;
}
.container .main:nth-last-child(1) {
grid-row: 1 / 1;
}
.container .main:nth-last-child(2) {
grid-row: 2 / 2;
}
}
<div class="container">
<div class="sidebar"><span>sidebar - B2</span></div>
<div class="main"><span>main - A1</span></div>
<div class="sidebar"><span>sidebar - B1</span></div>
<div class="main"><span>main - C1</span></div>
<div class="main"><span>main - A2 </span></div>
<div class="main"><span>main - A3</span></div>
</div>
The Problem in CSS Grid: Start with an odd number of cells and in media-queries to an even number. There will be an double gap in the media-queries and the layout isn't centered anymore.
html,
body {
margin: 0;
padding: 0;
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
background-color: #000;
color: #fff;
}
.logo-wrapper {
display: grid;
grid-template-columns: 1fr 280px 1fr;
grid-template-rows: 140px;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "l-1 logo l-3";
justify-content: center;
}
.l-1 {
grid-area: l-1;
}
.logo {
grid-area: logo;
}
.l-3 {
grid-area: l-3;
}
.logo-wrapper > div,
.content-wrapper > div {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.content-wrapper {
display: grid;
grid-template-columns: 1fr repeat(3, 240px) 1fr;
grid-template-rows: repeat(2, 240px);
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
" ol-1 c-1 c-2 c-3 or-3"
" ol-5 c-4 c-5 c-5 c-5";
justify-content: center;
}
.ol-1 {
grid-area: ol-1;
}
.ol-2 {
grid-area: ol-2;
}
.c-1 {
grid-area: c-1;
}
.c-2 {
grid-area: c-2;
}
.c-3 {
grid-area: c-3;
}
.or-3 {
grid-area: or-3;
}
.ol-5 {
grid-area: ol-5;
}
.c-4 {
grid-area: c-4;
}
.c-5 {
grid-area: c-5;
}
.bgGrey {
background-color: #4d4d4d;
}
.bgRed {
background-color: #ff4d4d;
}
.bgBeige {
background-color: #e2d8cb;
}
.bgViolet {
background-color: #ff4dff;
}
#media screen and (max-width: 844px) {
.logo-wrapper {
grid-template-columns: 1fr 250px 250px 1fr;
grid-template-rows: 160px;
grid-template-areas: ". logo logo .";
}
.content-wrapper {
grid-template-columns: 1fr repeat(2, 240px) 1fr;
grid-template-rows: repeat(3, 240px);
grid-template-areas:
". c-1 c-5 ."
". c-2 c-3 ."
". c-4 . .";
/* VERY VERY bad fiddle, this cannot be the right answer!
grid-template-columns: 20px repeat(2, $blockSize);
grid-template-areas:
". c-1 c-5"
". c-2 c-3"
". c-4 . "; */
}
.ol-1 div {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>from odd to even</title>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
<div class="logo-wrapper">
<div class="l-1"></div>
<div class="logo bgRed">Logo</div>
<div class="l-3"></div>
</div>
<div class="content-wrapper">
<div class="ol-1">
<div>ol-1</div>
</div>
<div class="c-1 bgBeige">Home</div>
<div class="c-2 bgGrey"></div>
<div class="c-3 bgRed">Image1</div>
<div class="or-3"></div>
<!-- new column -->
<div class="ol-5"></div>
<div class="c-4 bgRed">Image2</div>
<div class="c-5 bgViolet">Work</div>
</div>
</body>
</html>
This is a more complex example:
https://codepen.io/AndreasFoehl/pen/WwJMpW
In the large view everything is ok,
the magic starts in the css, media queries at column 219.
The upper Logo-Part is centered,
at 844px, the .content-wrapper isn't centered anymore.
Here is the grid-view in Firefox:
I think I might have a problem understanding grid in the media queries.
What about the cells you omit.
Cells that aren't empty make problems. Is display: none enough for the content inside?
This is just an example, here is the full and more complicated template
http://wkm4.binart.de/arbeiten.html
Hy friends, I want to divide a page into 5 equal parts using CSS grid property and it's doing better work but still, I am unable to understand the logic behind this. In a CSS grid system, a screen has 12fr units and here I used only 10fr units so that is what happens if I leave 2fr units or There is any other way to use all 12 units.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(5, 2fr);
}
</style>
</head>
<body>
<footer class="grid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</footer>
</body>
</html>
"In a CSS grid system, a screen has 12fr units"
No it doesn't. It has as many as you tell it to have. In your case you have told it to be 10fr wide with grid-template-columns: repeat(5, 2fr)
There is generally no need to use multiple values of fr since grid-template-columns: repeat(5, 1fr); will do the same thing.
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.grid div {
text-align: center;
border: 1px solid green;
}
<footer class="grid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</footer>
If you want a 6/12 column grid just adjust to grid-template-columns: repeat(6, 1fr);
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.grid div {
text-align: center;
border: 1px solid green;
}
<footer class="grid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</footer>
As you see since you only have 5 elements they take up the first 5 columns.
This question already has answers here:
Switching CSS classes based on screen size
(3 answers)
How to use particular CSS styles based on screen size / device
(6 answers)
Closed 2 years ago.
Is it possible to display items as columns or rows depending on the window size?
Like this:
desired-result
I want to imitate the image.
The blue items are in their own div.
Right now, when the window is resized the blue items move to the next line as columns.
Here is the CSS code:
.mainRedContainer{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
padding: 5px;
margin-bottom: 20px;
}
.orangeContainer{
padding: 10px;
height: 43vh;
margin-top: 20px;
background-color: #dee8f0;
}
.blueContainer{
margin-top:20px;
display: flex;
flex-flow: column wrap;
}
.blueItems{
min-width: 15vw;
max-width: 17.5vw;
max-height: 250px;
background-color: rgb(195, 220, 236);
margin-left: 10px;
margin-right: 10px;
}
Its actually pretty simple. You have to use #media in these situations. For instance, you want it to change for when the size is smaller than 576px. then:
#media (max-width: 576px) {
.mainRedContainer{
flex-direction: column;
}
.blueContainer{
flex-flow: row wrap;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;;
}
body {
padding: 10px;
border: 1px solid red;
}
.wrapper {
display: grid;
grid-template-columns: 8fr 4fr;
grid-template-rows: auto;
gap: 2rem;
}
.orangeContainer .orangeItem {
background-color: orange;
min-height: 200px;
height: 100%;
}
.blueContainer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
gap: 2rem;
}
.blueContainer .blueItem {
background-color: blue;
height: 200px;
}
#media (max-width: 768px) {
.wrapper {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.blueContainer {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="orangeContainer">
<div class="orangeItem">Item 1</div>
</div>
<div class="blueContainer">
<div class="blueItem">Item 2</div>
<div class="blueItem">Item 3</div>
</div>
</div>
</body>
</html>
I have this code where there is simply one column with three different rows fitted to the viewport. Each row will contain an image that is fit by height. I want to make it so that if the browser is resized horizontally, and the width of that column(viewport) falls below a certain point, additional rows are then inserted on the page THAT ALSO FIT the viewport. So it would snap from fitting three rows, to fitting four rows, then five and so on, depending on the width of the one column/viewport:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST SITE ONE</title>
<meta name="description" content="Test Site">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0px;
padding: 0px;
}
body{
display: block;
}
#page1{
background-color: aquamarine;
display: block;
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
}
.grid-container{
display: grid;
height: 100%;
grid-template-rows: repeat(3, 1fr);
}
.grid-items{
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
.slot-image{
height: auto;
width:auto;
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<section id="page1">
<div class="grid-container">
<div class=grid-items>
<img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
</div>
<div class=grid-items>image</div>
<div class=grid-items>image</div>
</div>
<div class="grid-container">
<div class=grid-items>
<img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
</div>
<div class=grid-items>image</div>
<div class=grid-items>image</div>
</div>
</section>
</body>
</html>
I would wrap the grid-template-rows: repeat(3, 1fr); definition within #media queries. Where you can define the min and max breakpoints.
For example:
#media only screen and (max-width: 480px) { // Small Devices
.grid-container{
grid-template-rows: repeat(3, 1fr); // 3 columns
}
}
#media only screen and (min-width: 481px) and (max-width: 768px) { // Medium Devices
.grid-container{
grid-template-rows: repeat(4, 1fr); // 4 columns
}
}
#media only screen and (min-width: 769px) { // Large Devices
.grid-container{
grid-template-rows: repeat(5, 1fr); // 5 columns
}
}