I am testing so css (css-grid) and here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html, body {
height: 100%;
}
.container {
display: grid;
height:100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"h h";
}
.header {
height: 300px;
grid-area: h;
background-color: red;
}
.box {
display: grid;
background-color: green;
height: 50px;
width: 50px;
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="box">Box1</div>
</div>
</div>
</body>
</html>
If you look at class name 'box' above, you can see that it's got display: grid and align-self: center.
When I run this I'm getting this error in the console:
"align-self has no effect on this element since it’s not a grid or flex item.
Try adding display:grid, display:flex, display:inline-grid, or display:inline-flex."
As you can see display: grid is there...Why is this happening?
It looks to the parent container. So your box is a child of "header".
If you place display:grid in the header css class, you will see that it works
.header {
height: 300px;
display:grid;
grid-area: h;
background-color: red;
}
In your CSS below:
.box{
display: grid;
background-color: green;
height: 50px;
width: 50px;
align-self: center;
}
Your .box selector's div becomes your grid-container which means
align-self cannot be used on this, align-self is used on grid-items to align along vertical direction. The property that we use to
control alignment of all the grid-items from grid-container is align-items.
Related
I am using styled-components but I think that won't make much of a difference. What I want to do is to make the grid automatically align to row width. When I apply 2 span for the preceding column, the following column does not wrap to full width on a certain range of view port width. After, I decrease the view port more then it goes back to what I want. How can I fix this without using media queries and flexbox? I know this can be fixed with media queries but I want to do it without it.
const LogoContact = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: 150px;
`;
const Logo = styled.div`
background-color: #a85218;
grid-column: span 2;
color: white;
`;
const Contact = styled.div`
background-color: #d0507e;
color: white;
`;
LogoContact is the parent container and Logo is for the column that takes 2 spans. Contact div is what I want to fix.
One option would be using media queries and give the contact div a span of 2 when between 300 and 600 screenwidth.
A better solution would be using flexbox instead of grid. Here's an example:
<!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>
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#logoContact {
display: flex;
flex-wrap: wrap;
}
#logo {
min-height: 150px;
min-width: 600px;
background-color: #a85218;
flex: 2 1;
color: white;
}
#contact {
min-height: 150px;
min-width: 300px;
flex: 1 1;
background-color: #d0507e;
color: white;
}
</style>
</head>
<body>
<div id="logoContact">
<div id="logo">logo</div>
<div id="contact">contact</div>
</div>
</body>
</html>
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>
I have a flex container, and in that container, I have a bunch of images. Using flexwrap, and a flex-item width of 33%, this presents the images nicely ... in Chrome (that is, they maintain their aspect ratios). In Safari, however, the images get stretched in the vertical direction which looks terrible.
Is there a fix for this?
(Note: For the code snippet below, you will have to open this post in both Chrome and Safari to see what I am talking about)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<img src='https://swipestack.s3.amazonaws.com/s/q/1.jpg' alt='1'>
<img src='https://swipestack.s3.amazonaws.com/s/q/2.jpg' alt='2'>
<img src='https://swipestack.s3.amazonaws.com/s/q/3.jpg' alt='3'>
<img src='https://swipestack.s3.amazonaws.com/s/q/4.jpg' alt='4'>
<img src='https://swipestack.s3.amazonaws.com/s/q/5.jpg' alt='5'>
<img src='https://swipestack.s3.amazonaws.com/s/q/6.jpg' alt='6'>
<img src='https://swipestack.s3.amazonaws.com/s/q/7.jpg' alt='7'>
<img src='https://swipestack.s3.amazonaws.com/s/q/8.jpg' alt='8'>
</div>
</body>
<style>
.container{
display: flex;
flex-wrap: wrap;
overflow: auto;
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
}
.container > * {
width: 33.33333%;
}
</style>
</html>
you can try this, which works only if you give the first and second images the same height of 475px as the others :
<style>
.container {
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
overflow: auto;
}
.container:first-child {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.container > * {
width: 33.33333%;
height: auto;
}
</style>
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>