This question already has answers here:
CSS Grid - Auto height rows, sizing to content
(3 answers)
Closed 3 years ago.
I have following problem: if there is content in first container, then the other two without content will be the same height as the first one:
https://jsfiddle.net/tj4hbya5/2/
.grid {
padding: 5px;
background: gray;
display: grid;
grid-template-columns: auto auto auto;
}
.todo-column {
min-height: 150px;
margin: 0 auto;
width: 90%;
background: cyan;
text-align: center;
}
.todo-title {
color: white;
font-size: 175%;
padding: 5px;
border-bottom: 5px dotted black;
}
<div class="grid">
<div class="todo-column">
<h1 class="todo-title">Aloittamatta</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Työn alla</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Valmis</h1>
</div>
</div>
So, how can I set the default height to be the same on all three containers, but if one of them has some content, then the height will be choosen automatically, while the other two without content stay at min-height?
Add align-items: self-start; in ".grid" class and set min-height in ".todo-column" class
.grid {
padding: 5px;
background: gray;
display: grid;
grid-template-columns: auto auto auto;
align-items:self-start;
}
.todo-column {
min-height: 150px;
margin: 0 auto;
width: 90%;
background: cyan;
text-align: center;
}
.todo-title {
color: white;
font-size: 175%;
padding: 5px;
border-bottom: 5px dotted black;
min-height: 100px;
}
<div class="grid">
<div class="todo-column">
<h1 class="todo-title">Aloittamatta</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Työn alla</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Valmis</h1>
</div>
</div>
.grid {
padding: 5px;
background: gray;
display: grid;
grid-template-columns: auto auto auto;
align-items: start;
}
.todo-column {
min-height: 150px;
margin: 0 auto;
width: 90%;
background: cyan;
text-align: center;
}
.todo-title {
color: white;
font-size: 175%;
padding: 5px;
border-bottom: 5px dotted black;
}
<div class="grid">
<div class="todo-column">
<h1 class="todo-title">Aloittamatta</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Työn alla</h1>
</div>
<div class="todo-column">
<h1 class="todo-title">Valmis</h1>
</div>
</div>
Related
I'm trying to make the red box be the same width as the flex container outlined in black.
.container {
display: flex;
width: 80%;
margin: auto;
column-gap: 1em;
outline: 1px solid black;
}
.a {
background: #f002;
flex: 3;
}
.b {
background: #00f2;
flex: 2;
}
.box {
background: #f0f2;
margin: 1em 0;
padding: 1em;
}
.fw {
background: red;
}
<div class="container">
<div class="a">
<div class="box">
A
</div>
<div class="box fw">
B
</div>
<div class="box">
C
</div>
</div>
<div class="b">
<p>Some text here</p>
</div>
</div>
This is how you can do it in this case that you have presented. The code might need to be changed if the propertion between the first column and second column change.
.container {
display: flex;
width: 80%;
margin: auto;
column-gap: 1em;
outline: 1px solid black;
}
.a {
overflow: visible;
background: #f002;
flex: 3;
}
.b {
background: #00f2;
flex: 2;
}
.box {
background: #f0f2;
margin: 1em 0;
padding: 1em;
}
.fw {
width: calc(166.666666% - 1em);
background: red;
}
<div class="container">
<div class="a">
<div class="box">
A
</div>
<div class="box fw">
B
</div>
<div class="box">
C
</div>
</div>
<div class="b">
<p>Some text here</p>
</div>
</div>
I have a layout that is a sidebar and a grid both wrapped in a flexbox. I'd like to put a div underneath the grid so it can have prev/next buttons, like in this image, but I can't figure out how to do that. The grid resizes itself with the window so the grid can take as many rows as necessary and then the div should go below that, and be as wide as the grid.
This is what I have, but the div is on the right of the grid:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boardgame Database</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
aside {
background-color: red;
flex: 1;
min-width: 250px;
}
.grid-container {
flex: 4;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
#flex-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
</style>
</head>
<body>
<div id="flex-container">
<aside class="sidebar">
</aside>
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
Checkout the following Code.
#main{
display :flex;
}
#sidebar{
width:70px;
height: 300px;
border: solid black 1px;
}
#grid-area{
width:200px;
height: 300px;
border: solid black 1px;
display: block;
}
#grid{
width:200px;
height: 250px;
border: solid black 1px;
display: block;
}
<div id="main">
<div id="sidebar"></div>
<div id="grid-area">
<div id="grid"></div>
<div id="button">next / prev</div>
</div>
</div>
You should use nested flex containers. Section and bottom div should be wrapped inside another flex container with flex direction to column.
So outer flex will make sidebar & inner flex container to be side by side.
Or just use a normal div container instead of flex.
here is another example only with grid keeping the pre/next button at the bottom of the viewport:
body {
margin: 0;
}
#grid-container {
display: grid;
height: 100vh;
grid-template-columns: minmax(250px, 1fr) 4fr;
grid-template-rows: 1fr auto;
}
aside {
background-color: red;
border: 1px solid;
margin: 0.25em;
grid-row: span 2;
grid-column: 1;
}
section,
#page-buttons {
grid-column: 2;
border: solid 1px;
margin: 0.25em;
}
section {
overflow: auto;
}
#page-buttons {
display: flex;
gap: 1em;
padding: 0.5em;
background: lightgray;
justify-content: center;
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
<div id="grid-container">
<aside class="sidebar">
</aside>
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
I hope you're well!
I am a bit new in writing css and I would like to achieve this result, but how?
Here is my try and I will be grateful for any advice and explanations.
<style>
#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}
#left{
text-align: left;
grid-column: 1/4;
margin-top: 2px;
background-color: red;
height: 200px;
}
#right {
text-align: right;
height: 100px;
padding-top: 10px;
margin-top: 2px;
grid-column: 4/6;
background-color: blue;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left" > div1 </div>
<div id="right" style="height:50px;"> div2 </div>
<div id="right" > div3 </div>
<div id="right" style="height:50px;"> div4 </div>
</div>
</body>
I think it's generally useful to think of these kinds of things as big blocks that contain smaller blocks. From that perspective you first have a layout with two columns, which you can achieve with a couple of simple grid or flex rules. There are many ways to do this, but here it is using grid:
.main-layout {
display: grid;
grid-template-columns: .35fr 1fr;
gap: 1rem;
min-height: 70vh;
}
.sidebar {
padding: 1rem;
background: skyblue;
}
.content {
padding: 1rem;
background: aliceblue;
}
<div class="main-layout">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
Once you have that, you can fill in the "content" block without thinking much about the outer layout. This makes it pretty straightforward:
section {
padding: 0.5em;
margin-bottom: 1rem;
background: lightblue;
}
h1 {
font-size: 1.2rem;
margin: 0;
border-bottom: 1px solid white;
}
/* outer layout -- same as before */
.main-layout {
display: grid;
grid-template-columns: .35fr 1fr;
gap: 1rem;
min-height: 70vh;
}
.sidebar {
padding: 1rem;
background: skyblue;
}
.content {
padding: 1rem;
background: aliceblue;
}
<div class="main-layout">
<div class="sidebar">sidebar</div>
<div class="content">
<section>
<h1>This is a heading</h1>
<p>And this is content</p>
</section>
<section>
<h1>This is a heading</h1>
<p>And this is content</p>
</section>
<section>
<h1>This is a heading</h1>
<p>And this is content</p>
</section>
</div>
</div>
I am trying to achieve the following:
The text inside the square (example text: "1/4") should be centered horizontally
and vertically.
The four squares should be spread with the same
distance over the main container (red).
The text (example text: "Name", "Longer Name" etc.) should be centered over the squares, and not affect the spreading of the squares (point 2)
What I got this far is the code below. I would greatly appreciate if somebody could point me in the correct direction!
.container {
background-color: red;
width: 320px;
height: 320px;
margin: 30px auto 30px auto;
}
.inner {
display: flex;
}
.inner-content {
display: block;
/* width: 25%;*/
margin-left: auto;
margin-right: auto;
background-color: green;
}
.text {
width: 25%;
text-align: center;
}
.square {
margin-top: 5px;
height: 25px;
width: 25px;
vertical-align: top;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: black;
box-shadow: 0 0 0 2px red, 0 0 0 5px black;
}
<div class="container">
<div class="inner">
<div class="inner-content">
<span class="text">Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Longer Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Yo</span>
<div class="square">
1/4
</div>
</div>
</div>
Take a look at the following example:
* {
box-sizing: border-box;
}
.container {
background-color: red;
width: 320px;
height: 320px;
margin: 30px auto 30px auto;
padding: 5px;
}
.inner {
display: grid;
grid-template-columns: repeat(4, 1fr); /* fix spreading */
grid-column-gap: 5px;
}
.inner-content {
background-color: green;
text-align: center;
}
.text {
width: 100%;
}
.square {
margin: 5px auto; /* fix box centering */
height: 25px;
width: 25px;
vertical-align: top;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
background-color: black;
box-shadow: 0 0 0 2px red, 0 0 0 5px black;
line-height: 25px; /* fix vertical center */
}
<div class="container">
<div class="inner">
<div class="inner-content">
<span class="text">Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Longer Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Yo</span>
<div class="square">
1/4
</div>
</div>
</div>
I am trying to vertically align a div in my code but with no success. This div contains sub divs. The first one
I want this to look like this :
but at the moment it is not aligned. This is my HTML code :
body {
display: block;
margin-left: auto;
margin-right: auto;
background: #f1f1f1;
}
.content {
float: left;
margin: 20px auto;
text-align: center;
width: 300px;
}
.content h1 {
text-transform: uppercase;
font-weight: 700;
margin: 0 0 40px 0;
font-size: 25px;
line-height: 30px;
}
.circle {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
/* the magic */
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: white;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 auto 20px;
}
.blue {
background-color: #052D72;
}
.green {
background-color: #16a085;
}
.red {
background-color: #e74c3c;
}
<div class="content">
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue">Blue</div>
<div class="circle blue"></div>
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
So, in the .content I tried adding this :
vertical-align:baseline;
but I saw no difference.
Add display:inline-block & Remove float for #content
.content {
display: inline-block;
margin: 20px auto;
text-align: center;
vertical-align: middle;
width: 200px;
}
https://jsfiddle.net/k0fx384a/1/
EDIT with class: https://jsfiddle.net/k0fx384a/2/
You have used same #id with multiple elements. That is not allowed in HTML across all browsers(seems like IE and FF allow multiple #ids).
So just change all the occurances of id="content" to class="content" and the CSS should start working.
DEMO
change <div id="content"> to <div class="content"> so the styles will be applied.
If you want them both vertically and horizontally aligned, I would recommend using flex. This offers more flexibility and is more forward-facing.
Mozilla Docs on Flex
If you use the rules align-items and justify-content, you'll get magic workings. Check out an example: https://jsfiddle.net/vrad7yuj/
.container {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
border: 2px solid #f00;
}
.col {
border: 2px solid #00f;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ball {
border-radius: 50%;
border: 1px solid #0f0;
height: 60px;
width: 60px;
}
<div class="container">
<div class="col">
<div class="ball"></div>
</div>
<div class="col">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="col">
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
Alternative, if you want to do this with a little count of codelines, you can use flexbox:
body {
display: flex;
margin-left: auto;
margin-right: auto;
background: #f1f1f1;
}
.content {
display: flex;
flex-direction: column;
margin: 20px auto;
text-align: center;
width: 300px;
}
.content h1 {
text-transform: uppercase;
font-weight: 700;
margin: 0 0 40px 0;
font-size: 25px;
line-height: 30px;
}
.circle {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
/* the magic */
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: white;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 auto 20px;
}
.blue {
background-color: #052D72;
}
.green {
background-color: #16a085;
}
.red {
background-color: #e74c3c;
}
<div class="content">
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue">Blue</div>
<div class="circle blue"></div>
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
Take a look on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Should just be an alternative solution and new knowledge for you. ;-) Cheers.