When I try to set textarea as follows. I could set max-width: 50rem as follows.
.row {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
}
.box {
width: 100%;
max-width: 50rem
}
<div class="row">
<div class="label">test</div>
<textarea class="box">test</textarea>
</div>
But when I add class="template", the textarea is shortened as follows. My desired result is to set textarea max-width:50rem as above.
But when I set the following class, the width is shortened.
.row {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
}
.box {
width: 100%;
max-width: 50rem
}
.template {
display: grid;
grid-template-columns: 3rem 1fr;
gap: 0.75rem;
align-items: center;
height: 100%;
}
<div class="row">
<div class="template">
<div class="label">test</div>
<textarea class="box">test</textarea>
</div>
</div>
How can I set max-width:50rem inside <div class="template"> ?
Thanks.
The max-width isn't working because the row element makes it to small to take any max-height into effect.
I'd use a flex-grow: 1; on the .template to let it grow so the max-width will trigger
.row {
display: flex;
width:100%;
flex-wrap: nowrap;
gap: 1rem;
}
.box {
width: 100%;
max-width: 50rem
}
.template {
display: grid;
grid-template-columns: 3rem 1fr;
gap: 0.75rem;
align-items: center;
height: 100%;
flex-grow: 1;
}
<div class="row">
<div class="template">
<div class="label">test</div>
<textarea class="box">test</textarea>
</div>
</div>
Related
I am building a grid layout based on 3 rows and I would like the middle row to take as much space as possible.
The first row should be at the start of the screen (blue bar in the code example) and the third row should be at the end of the screen(red bar in the code example)
How can I achieve this? :S
https://jsfiddle.net/xmghkLvs/31/
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
row-gap: 1%;
}
.top-bar{
background-color: blue;
border-radius: 5px;
}
.main-menu{
justify-self: center;
display: flex;
flex-direction: column;
background-color: green;
}
.bottom-bar{
background-color: red;
border-radius: 5px;
}
<div class="grid">
<div class="top-bar">
<h1>
Title
</h1>
</div>
<div class="main-menu">
<button>
One Button
</button>
<button>
Other Button
</button>
</div>
<div class="bottom-bar">
<p>
I'm a text
</p>
</div>
</div>
1st: Give the grid a min-height like 100vh (.grid { min-height: 100vh; }). This will make consume at least the viewports height.
2nd: Give the the first and last row a height of min-content. That will make it only consume as much height as needed. auto will then consume all remaining space by default.
.grid {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content auto min-content;
row-gap: 1%;
}
.top-bar{
background-color: blue;
border-radius: 5px;
}
.main-menu{
justify-self: center;
display: flex;
flex-direction: column;
background-color: green;
}
.bottom-bar{
background-color: red;
border-radius: 5px;
}
<div class="grid">
<div class="top-bar">
<h1>
Title
</h1>
</div>
<div class="main-menu">
<button>
One Button
</button>
<button>
Other Button
</button>
</div>
<div class="bottom-bar">
<p>
I'm a text
</p>
</div>
</div>
Try using 100vh
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
row-gap: 1%;
height: 100vh;
}
and add specific height for the .top-bar abd .bottom-bar
You could approach this using Flexbox and 100vh as show below.
.grid {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.top-bar{
display: flex;
height: 20%;
}
.main-menu{
display: flex;
align-items: center;
justify-content: center;
height: 60%;
}
.main-menu button {
height: 60px;
width: 120px;
}
.bottom-bar{
display: flex;
align-items: center;
justify-content: center;
height: 20%;
}
I have a flexbox with a grid and a div in it, and I'd like to collapse the grid container's height to the height of the rows, so that the buttons below it are just below the grid items. The number of rows is also dynamic, because I'm using grid-template-columns: repeat(auto-fit, minmax(250px, 1fr). I can set a max-height of the grid items, like in this image, but that only makes the items smaller and doesn't make the grid container any shorter.
I've tried changing the flexbox they're in so the flex-direction is row, and set flex-wrap to wrap, but that causes other problems and overlapping text when the window size changes. Setting the height or max-height of the grid container to fit-content seems to do nothing as well.
Here is what I have:
<!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 rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
min-height: 100px;
}
#main-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
#section-container {
display: flex;
flex-direction: column;
width: 100%;
}
#page-buttons {
height: 50px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="main-container">
<aside class="sidebar">
</aside>
<div id="section-container">
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</section>
<div id="page-buttons">
first
prev
page
next
last
</div>
</div>
</div>
</body>
</html>
The style
.grid-container {
flex: 4;
}
is equivalent to flex-grow: 4;
so it makes the container grow. Just remove it and it will keep its dimension
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 rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
min-height: 100px;
}
#main-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
#section-container {
display: flex;
flex-direction: column;
width: 100%;
}
#page-buttons {
height: 50px;
text-align: center;
font-size: 20px;
}
<body>
<div id="main-container">
<aside class="sidebar">
</aside>
<div id="section-container">
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</section>
<div id="page-buttons">
first
prev
page
next
last
</div>
</div>
</div>
</body>
How to reduce the width of the flexbox container with the wrap option so it takes only the width taken by its items ?
The objective is not to see any green at the right of the yellow boxes (except for the margin set on the box item)
NOTE: The flexbox with wrap can accept more than 2 items per row, in function of the window's size.
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px; /* This width changes with the window's size */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: flex-start;
}
.list .box {
width: 300px; /* This will never change */
height: 300px;
margin: 0 32px 32px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
Link to Codepen
I want to show you an alternative with css-grid and using the attribute minmax. I believe that will be closer to that what you want.
It will give every box a width of at least 300px and will fit as many boxes as possible. If space is left, then box size will improve to fit the space unless another box would fit.
To do that we have to add: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
That css line will add the columns amount. repeat means, that the the adding of a column is repeated according to the following rules:
auto-fit: It has to fit the screen width without leaving an empty space. it will resize the 1fr to make it possible.
minmax(300px, 1fr) means that every fraction needs to be at least 300px. If the screen is larger, then the first rule will apply again and the 1fr will be resized accordingly.
body {
margin: 0;
padding: 0;
width: 900px;
}
h1 {
background-color: red;
height: auto;
margin: 0;
}
.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
grid-auto-rows: auto;
grid-gap: 32px;
background-color: green;
}
.box {
min-height: 300px;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
The answers given are correct,
You can try this as a different alternative.
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
background-color: green;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.list .box-wrapper {
width: 300px;
height: 300px;
display: flex;
}
.list .box {
width: 100%;
margin: 0 16px 16px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
</div>
</main>
I just commented out the margin on the .box and .list and replace flex-start with space-between on justify-content property and thereafter just added two smaller lines to format it well which are column-gap and row-gap to enerlarge the space between them
Example
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: space-between;
column-gap: 1px;
row-gap: 25px;
}
.list .box {
width: 300px;
height: 300px;
/*margin: 0 150px 32px 0;*/
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
How to span a one of the grandchild element to 100% width in CSS Grid while the parent is container is divided into 3 fractions.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container > div {
background-color: #4834d4;
width: 100%;
}
.container > div .child_01 {
background-color: #f9ca24;
width: 80%;
height: 50px;
margin: 1rem auto;
}
.container > div .child_02 {
background-color: #eb4d4b;
width: 80%;
height: 50px;
margin: 1rem auto;
}
<div class="container">
<div>
<div class="child_01"></div>
<div class="child_02"></div>
</div>
<div>
<div class="child_01"></div>
<div class="child_02"></div>
</div>
<div>
<div class="child_01"></div>
<div class="child_02"></div>
</div>
</div>
What I am trying to achieve is this.desired layout
Is this possible to achieve in CSS Grid.
Here you go with a solution
.container {
padding: 20px;
display: flex;
flex-direction: column;
background-color: #4834d4;
}
.container > div {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 1rem;
}
.child_01 {
display: inline-flex;
background-color: #f9ca24;
width: 30%;
height: 50px;
}
.child_02 {
display: flex;
background-color: #eb4d4b;
width: 100%;
height: 50px;
margin: 1rem auto;
}
<div class="container">
<div>
<div class="child_01"></div>
<div class="child_01"></div>
<div class="child_01"></div>
</div>
<div class="child_02"></div>
<div class="child_02"></div>
<div class="child_02"></div>
</div>
I have use flex instead of grid.
How do I stretch the divs with a yellow background to full height? It should cover up the green but it is not working. I tried adding height: 100% on it but then it adds up the height from the search bar?
https://jsfiddle.net/nuy20j1h/
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 75%;
background: green;
}
.search-bar {
width: 100%;
padding: 25px;
background: blue;
}
.content-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: flex-stretch;
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
First you should add a style reset, I'm using this now * {} as you can se below. The trick here is to run flex-direction: column; on .home and you can tell .content-wrap to take up the rest of that space after the search with flex-grow: 1;
box-sizing: border-box; is, if you add let's say width: 200px; to a element, and add padding: 20px;, the element will stay 200px with the padding included. If you don't have that, it will take up 200px + 40px.
if you want the fiddle, here it is
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
width: 75%;
background: green;
}
.search-bar {
width: 100%;
padding: 25px;
background: blue;
}
.content-wrap {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
width: 100%;
align-items: flex-stretch;
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
As mentioned in other answers, there is one main issue here:
flex-direction: column;, which I added to home, to enable the usage of flex properties instead of height, to make the .content-wrap fill the available space left in home
That will make the .search-bar and .content-wrap stack vertical, and enable the use of flex: 1 on .content-wrap, which will make it fill the remaining space/height.
So even if you got answers already, and since there are some properties with wrong value, or not needed, I decided to post an answer to clarify the changes made.
See my notes made in the CSS for further clarifications and what I changed.
Stack snippet
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-direction: column; /* added */
/*flex-wrap: wrap; removed, not needed */
/*align-items: flex-start; removed, items should fill parent's,
in this changed case, width */
width: 75%;
background: green;
}
.search-bar {
/*width: 100%; not needed, default for column
item is to fill parent width as
its "align-items" is "stretch" */
padding: 25px;
background: blue;
}
.content-wrap {
flex: 1; /* added, take the remaining space left
left of its parent (height in this case) */
display: flex;
flex-wrap: wrap;
/*width: 100%; not needed, default for column
item is to fill parent width as
its "align-items" is "stretch" */
/*align-items: flex-stretch; wrong value, should be "stretch",
though since that is the default,
it is not needed */
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
flex-direction: column; is your friend. Here is a reworked fiddle of your code: https://jsfiddle.net/vsjktmms/1/
Using the same HTML structure you provided:
.block {
display: flex;
width: 80%;
margin: 0 auto;
background-color: gray;
align-items: stretch;
}
.sidebar {
width: 25%;
height: 600px;
background-color: red;
}
.home {
display: flex;
flex-direction: column;
align-items: stretch;
width: 75%;
background-color: green;
}
.search-bar {
padding: 25px;
background-color: blue;
}
.content-wrap {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: pink;
}
.content,
.single {
width: 50%;
background: yellow;
}