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
}
}
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>
I have a issue with css grid , i build a container with two div in it with css grid and i want to adjust container to page center. I use this code :
html{
width: 100vw;
height : 100vh;
}
body{
height : 100%;
}
.container-fluid{
width:100%;
height : 100%;
display:grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border:1px solid red;
}
.logo-container{
background-color: khaki;
}
.form-container{
height :540px;
background-color: lightblue;
}
<!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">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-query.css">
<title>Login & Register User With Profile</title>
</head>
<body>
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
<link rel="stylesheet" href="assets/css/all.css">
</body>
</html>
as you see when grid container height bigger then page height a issue occurs (please see code result).
when use height for body tag , grid height overflowing and when delete height from body tag every thing is ok but in this situ container can't adjust container in center of page.
what is problem?
Simplify your code like below:
body {
margin: 0; /* remove default margin */
}
.container-fluid {
min-height: 100vh; /* at least screen height */
display: grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box; /* to consider the border inside the height */
}
.logo-container {
background-color: khaki;
}
.form-container {
height: 540px;
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
Or like below:
body {
margin: 0;
}
.container-fluid {
height: 100vh; /* full height */
display: grid;
grid-template-columns: 300px;
/* first row at 200px max-height and second row at 540px max-height */
grid-template-rows: minmax(auto,200px) minmax(auto,540px);
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box;
}
.logo-container {
background-color: khaki;
}
.form-container {
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
when i try to display blocks in grid then there is space at the end of grid item on right side and there is no space at the start of the grid i.e at the left side . You can see screenshot and code. i cannot figure it out what is the problem. I hope you can figure it out.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gird-section{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 40px;
background-color: yellow;
}
.grid-item{
background-color: red;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div class="gird-section">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
You can use Css Grid Layout
I have edited your code so you can have yellow space left and right. I added width in the first section in order for the parent to have more with then the child . For more editing I suggest to watch the link above.
<head>
<meta charset="utf-8" />
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(5, 1fr);
}
#item1 {
background-color: yellow;
grid-column: 1/2;
}
#item2 {
background-color: red;
grid-column: 2/4;
}
#item3 {
background-color: yellow;
grid-column: 4/5;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
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 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>