This question already has answers here:
CSS Grid - Auto height rows, sizing to content
(3 answers)
Closed 2 months ago.
After I add anything into the one of the 3 divs others height expands to fit the biggest one is there any way to remove this auto sizing? Code example (box1 and box3 expand to the size of box2):
<!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>
</head>
<body>
<div class="gridBody">
<div> box1 (show this without the width of the second line)</div>
<div> box2<div> second line</div> </div>
<div> box3 (show this without the width of the second line)</div>
</div>
<style>
.gridBody {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.gridBody div {
margin: 20px;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
}
</style>
</body>
</html>
I tried grid-auto-rows/grid-auto-columns:min-content and expected it to adjust the size of box1 and box3 to the minimal content but it didn't work
It seems that you could add align-items: start to gridBody to avoid other div expanding height to fit the biggest one.
By default, grid layout will place the items in a behavior similar to align-items: stretch, which resulted in all div stretched to the full height.
More about align-items
Example:
.gridBody {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* 👇 Add this line */
align-items: start;
}
.gridBody div {
margin: 20px;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
}
<div class="gridBody">
<div> box1 (show this without the width of the second line)</div>
<div> box2
<div> second line</div>
</div>
<div> box3 (show this without the width of the second line)</div>
</div>
Related
I'm trying to create a grid with black boxes on the left and right side of the container, and a gray box in the center that contains different elements. The boxes on the left and right should have a width that's half of the container's height, and the middle item should stretch to fit it's content, but the entire container shouldn't be wider than the parent element. Here's what it should look like.
This is the HTML and CSS that I wrote:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
}
#container {
display: grid;
max-width: 100%;
grid-template-columns: min-content auto min-content;
width: fit-content;
}
#middle {
background-color: gray;
}
#left,
#right {
aspect-ratio: 1 / 2;
background-color: black;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="middle">
<p>lorem ipsum</p>
</div>
<div id="right"></div>
</div>
</body>
</html>
The code works as expected until I set the height of html and body to 100% like so:
html,
body {
height: 100%;
}
When I do this, the left item no longer appears on the page. Here's a screenshot of this. Oddly enough, if I set the margin of body to 0, then the left item appears properly.
I tried reordered the elements in #container so that #left and #right are the last elements in the container, and I used grid areas to force #left to appear on the left side.
/* Added CSS properties */
#container {
grid-template-areas: 'left-side middle-side right-side';
}
#middle {
grid-area: middle-side;
}
#left {
grid-area: left-side;
}
#right {
grid-area: right-side;
}
<!--Modified HTML-->
<div id="container">
<div id="middle">
<p>lorem ipsum</p>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
This made the left item appear, but it overlapped into the middle container, cropping out the beginning of the text. This is what the result looked like.
I know that the problem is rooted in the aspect-ratio property because, if I remove it, and set the width of #left and #right to a value such as 400px, #left appears properly.
Does anybody know how can I make the grid appear properly? Is there perhaps another way I can achieve the same effect as the aspect-ratio property?
I'm wondering if it's possible to get rid of vertical scroll having 3 rows viewing on a mobile device that should fit/stretch to the height of screen's and shrink when the screen height is smaller than it should be, so if there's a taller device all elements would grow proportionally to fit the whole screen's height instead of having the scrollbar that appears every time when the sum of height of the container's elements is bigger than the screen's height. What properties should I use? Thank you.
You can do it with CSS Flexbox. I am posting an example that I believe creates the effect you want.
In the HTML there are three rows (header, main, footer) wrapped inside a div:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<header>
<p>Header</p>
</header>
<main>
<p>Main</p>
</main>
<footer>
<p>Footer</p>
</footer>
</div>
</body>
</html>
and the CSS:
html, body {
margin: 0;
padding: 0;
}
div {
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
header {
background-color: lightblue;
flex: 1 1;
}
main {
background-color: lightcyan;
flex: 1 1;
}
footer {
background-color: lightgreen;
flex: 1 1;
}
You can use CSS grids and set a template with 3 rows and set the height of each row-elements to 33.33333%. This makes sure that the elements take the whole screen.
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 3 years ago.
I was trying to create a responsive square and added the following:
.square {
width: 50%;
height: 50%;
}
however, it expands horizontally but vertically does not expand at all...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body{
background: #cccede;
}
.square {
width: 50%;
height: 50%;
border: 2px solid black
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
In this snippet, why does the box not take the height of the windows to calculate its height?
As others have said, % works from the container of the element, so you need to manually set a height / width for body.
However, you could also use vh / vw, which are units for a percent of the viewport height, and viewport width respectively
body {
background: #cccede;
}
.square {
width: 50vw;
height: 50vh;
border: 2px solid black
}
<body>
<div class="square"></div>
</body>
height: 50% means that it will be half as tall as its parent container. Your square is that small because it's inside the body tag which is small. You can make the body as tall as the screen by doing this:
body {
height: 100%;
}
I have a container which is quite large vertically and would like to make its content scrollable even though the content doesn't overflow its parent. Is this something that's not possible?
Example code
<div class="container">
<div class="content">
This div should be scrollable even though it fits the parent.
</div>
</div>
Styling
.container {
height: 500px;
overflow: scroll;
}
No its not possible to make its content scrollable even though the content doesn't overflow its parent. your just have to set the min-height: 600px /*more then your container height*/ of your .content.
here is the code in snippet.
.container {
height: 500px;
overflow-y: scroll;
}
.content {
min-height: 600px;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body>
<div class="container">
<div class="content">
This div should be scrollable even though it fits the parent.
</div>
</div>
</body>
Thank You...
This question already has answers here:
How to center a flex container but left-align flex items
(9 answers)
Closed 5 years ago.
I'm trying to create a flexbox container that uses flex-wrap: wrap but once it's wrapped is only as wide as it needs to be, that way it can be centered.
Right now, once I resize the window small enough that the elements wrap, the element continues to use up the maximum width it can, thus causing it's child elements to be pushed all the way to the left.
Here's a link to my Plunker
Here's a gif of me resizing the window. As you can see, when the green and red divs have enough space to be on the same line they appear centered, but not when they wrap. Preferably, there should be as much whitespace to the left of the red div as to the right of the green div.
Preferably, when the rows wrap it should look like this:
Any help would be greatly appreciated!
You don't want widths on your block elements (the red and green boxes) within the flexbox container. That is similar to a "responsive" design pattern rather than flex.
Flex width (or height) stays the same no matter what. Therefore, be sure to size the container, and flex its children.
.flex-container {
width: 25%;
height: auto;
margin:auto;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
.flex-container div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
.green-block{
/*min-width: 200px;*/
background-color: green;
padding: 10px;
display:flex;
}
.red-block{
/*min-width: 300px;*/
background-color: red;
padding: 10px;
display:flex;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="flex-container">
<div class="flex-row-wrappable">
<div class="red-block">I'm a red block</div>
<div class="green-block">Imma green block, and I have more width than my red counterpart.</div>
</div>
</div>
</body>
</html>