this is my render on picture why grid-template-columns and grid-template-rows work weirdly what i'm missing ?
i had placed grid-template-columns and grid-template-rows with the display: grid; but it doesn't work.....
html:
<div class="parent" >
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div> <div class="box box4">box4<div>
<div class="box box5">box5</div>
<div class="box box6">box6</div>
<div class="box box7">box7</div> <div class="box box8">box8<div>
<div class="box box9">box9</div>
</div>
css:
.parent{
background-color: rgb(106, 110, 102);
width: 800px;
height: 800px;
display: grid;
grid-template-columns: 100px 50% 100px;
grid-template-rows: 200px 200px 200px ;
}
.box{
width: 100px;
height: 100px;
background-color: rgb(190, 190, 6);
border: 2px solid rgb(255, 255, 255);
border-radius: 5px;
}
The two divs that are sticking out are missing closing div tags
<div class="box box4">box4<div>
Related
I want grid columns that are a minimum of 200px and a maximum of 300px. I'm trying this, but the columns are always 300px.
grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
I can make columns that shrink like this:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
But then they get too big.
I've checked the docs for minmax() and don't see an applicable example.
Is there a workaround for this?
See The Fiddle
The Answer
Important elements to the answer include changing to: minmax(300px, auto)); as well as adding box-sizing: border-box;
Without those, the grid is not centered when it's down to one column.
Thanks!
You may use minmax(200px,1fr)or minmax(200px,auto) and then max-width on the children themselves to avoid them grow bigger than 300px.
possible examples
* {
box-sizing: border-box
}
body {
padding: 20px;
font-family: Helvetica;
}
/* sizing */
.wrapper {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.wrapper.bis {
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
.box {
max-width: 300px
}
/* --- */
.wrapper {
display: grid;
grid-gap: 10px;
}
.box {
background-color: #20262e;
color: #fff;
border-radius: 3px;
padding: 20px;
font-size: 14px;
max-width: 300px
}
.box {
/* Demo see average width by chunks of 50px bg-gradient-color */
background-image: repeating-linear-gradient(to right, red 0 50px, green 50px 100px);
background-position: 0 0;
background-repeat: repeat-x;
background-size: auto 5px;
}
<div class="wrapper">
<div class="box a">A - 200px,1FR</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
<hr>
<div class="wrapper bis">
<div class="box a">A - 200px,AUTO</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
I tried your code and I inspect element in my browser,and I think this is correct.because you use padding in each of these boxes.
this when using max value:
this when using the minimal value:
In Flexbox and Grid, we can change the order in which items are displayed, with among other things the order property. Everywhere, I'm reading that the default order value is 0, also on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items.
But look at this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Order demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 40px;
}
.wrapper {
width: 600px;
display: grid;
grid-template-columns: repeat(6, 100px);
grid-gap: 10px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
order: 1;
}
.box:nth-child(even) {
background-color: #ccc;
color: #000;
}
.box2 {
order: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
<div class="box box11">11</div>
<div class="box box12">12</div>
</div>
</body>
</html>
Here is the corresponding Pen, in which you can see the rendering: https://codepen.io/FrankConijn/pen/BaYxBzd.
Item nr. 2 is displayed first, while it has order: 0, which should have it displayed in the order in which it is placed in the code (2nd). That suggests that the specs are incorrect, and that the default value is 1. Am I right?
order does indeed have a default value of 0 (MDN formal definition & MDN 'Ordering Flex Items'), but in your example you've overridden this by giving each .box an explicit order: 1; here the order: 0 on .box2 is behaving correctly according to its property in appearing in the 1st position.
If you remove the order on your .box class and let them order by default (0) you'll see that the position of .box2 is placed as it should be: as the 2nd box:
body {
margin: 40px;
}
.wrapper {
width: 600px;
display: grid;
grid-template-columns: repeat(6, 100px);
grid-gap: 10px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.box:nth-child(even) {
background-color: #ccc;
color: #000;
}
.box2 {
order: 0;
}
<body>
<div class="wrapper">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
<div class="box box11">11</div>
<div class="box box12">12</div>
</div>
</body>
I'm trying to create a form with a variable number of form fields that would expand horizontally. Each field would have a minimum width of 300 px, but would expand to fill the row if there is extra space. If there is not enough space for each field at 300px, then it would wrap to another row. Flexbox would be the perfect solution for this. However, I also want there to be a variable width container for submit & cancel buttons that is fixed on the right side of the first row. (See the attached illustration.)
How can I create this fixed, right-aligned container that Flexbox would flow around? Can this be done with Flexbox alone? Would CSS Grid (or a combination of Flexbox & Grid) be helpful here? Example code would be appreciated.
I think your best solution is to use float and inline-block. then you can adjust sizing considering media query
body>.container {
background-color: #FFFFFF;
margin: auto;
margin-top: 24px;
padding: 0px;
}
.container {
border: solid 1px #F00;
font-size:0;
}
.box {
box-sizing: border-box;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
min-height: 36px;
width: calc(25% - 10px);
min-width: 200px;
display:inline-block;
margin: 5px;
font-size:initial;
}
.box.buttons {
float:right;
}
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<div class="container">
<div class="box buttons">
<button>Submit</button>
<button>Cancel</button>
</div>
<div class="box a">Box A</div>
<div class="box b">Box B</div>
<div class="box c">Box C</div>
<div class="box e">Box E</div>
<div class="box f">Box F</div>
</div>
After some experimentation, I found that this is possible with CSS Grid. Here is the basic layout:
HTML:
<div class="auto-fit">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">F</div>
<div class="G">G</div>
<div class="H">H</div>
<div class="I">I</div>
<div class="J">J</div>
<div class="K">K</div>
<div class="L">L</div>
<div class="M">M</div>
<div class="buttons"><button>Submit</button><button>Cancel</button></div>
</div>
CSS:
div.auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
div.auto-fit > div {
background-color: #fff;
border-radius: 3px;
padding: 15px;
font-size: 14px;
}
div.buttons {
grid-column: -1/-2;
grid-row: 1/2;
}
Here is a jsfiddle that shows it in action: https://jsfiddle.net/lobo78/5ufqdm4y/22/
I am new to CSS grid, I have a nested grid layout page. I could not get a scroll bar for grid child div.fieldsContainer.
html,body,
.wrapper{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.wrapper{
display: grid;
grid-template-rows: 50px 1fr 50px;
}
.header{
border: 1px solid #ddd;
background: lightyellow;
}
.footer{
background: lightpink;
}
.content{
display: grid;
grid-template-columns: 250px 1fr 300px;
grid-gap: 10px;
overflow: hidden;
}
.fieldTypes{
display: grid;
grid-template-rows: 40px 1fr;
}
.fieldTypes .search{
border: 1px solid red;
}
.fieldTypes .fieldsContainer{
display: grid;
grid-template-columns: repeat(3, minmax(70px,1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
}
.card{
padding: 10px;
background: #ddd;
}
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
<div class="fieldTypes">
<div class="search">search</div>
<div class="fieldsContainer">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
</div>
</div>
<div class="inndercontent">
innder content
</div>
<div class="graphs">
graphs
</div>
</div>
<div class="footer">
Footer
</div>
</div>
One solution would be to set overflow-y:auto on the parent ( .fieldTypes ) and overflow-y:scroll on .fieldsContainer
There is no ' story ' behind this. Just that you have to set a default overflow for the parent to accept it, and then specify overflow-y:scroll( as you want vertical scroll ) on the child.
html,body,
.wrapper{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.wrapper{
display: grid;
grid-template-rows: 50px 1fr 50px;
}
.header{
border: 1px solid #ddd;
background: lightyellow;
}
.footer{
background: lightpink;
}
.content{
display: grid;
grid-template-columns: 250px 1fr 300px;
grid-gap: 10px;
overflow: hidden;
}
.fieldTypes{
display: grid;
grid-template-rows: 40px 1fr;
overflow-y:auto;/*added*/
}
.fieldTypes .search{
border: 1px solid red;
}
.fieldTypes .fieldsContainer{
display: grid;
grid-template-columns: repeat(3, minmax(70px,1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
overflow-y:scroll;/*added*/
}
.card{
padding: 10px;
background: #ddd;
}
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
<div class="fieldTypes">
<div class="search">search</div>
<div class="fieldsContainer">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
</div>
</div>
<div class="inndercontent">
innder content
</div>
<div class="graphs">
graphs
</div>
</div>
<div class="footer">
Footer
</div>
</div>
Here's a more reduced case (to cut through the irrelevant parts)
html, body, .A {
height: 100%; /* matters */
width: 100%;
margin: 0;
padding: 0;
}
.A {
max-height: 300px; /* matters */
display: grid; /* matters */
overflow: hidden; /* matters */
}
.B {
display: grid; /* matters */
overflow-y: auto; /* matters */
}
.D {
overflow-y: scroll; /* matters */
}
.C {
padding: 10px;
background-color: #07f;
}
.E {
padding: 10px;
background-color: #eee;
}
<div class="A">
<div class="B">
<div class="C">search</div>
<div class="D">
<div class="E">1</div>
<div class="E">2</div>
<div class="E">3</div>
<div class="E">4</div>
<div class="E">5</div>
<div class="E">6</div>
<div class="E">7</div>
<div class="E">8</div>
<div class="E">9</div>
<div class="E">10</div>
<div class="E">11</div>
<div class="E">12</div>
<div class="E">10</div>
<div class="E">11</div>
<div class="E">12</div>
<div class="E">10</div>
<div class="E">11</div>
<div class="E">12</div>
</div>
</div>
</div>
Set the parent's height to 100vh. Then overflow-y: scroll will work on the children.
See this example (based on the reduced case answer).
html, body, .A {
margin: 0;
padding: 0;
}
.A {
height: 100vh; /* matters */
display: grid; /* matters */
}
.B {
padding: 10px;
background-color: #07f;
}
.C {
overflow-y: scroll; /* matters */
}
.D {
padding: 10px;
background-color: #eee;
}
<div class="A">
<div class="B">search</div>
<div class="C">
<div class="D">1</div>
<div class="D">2</div>
<div class="D">3</div>
<div class="D">4</div>
<div class="D">5</div>
<div class="D">6</div>
<div class="D">7</div>
<div class="D">8</div>
<div class="D">9</div>
<div class="D">10</div>
<div class="D">11</div>
<div class="D">12</div>
<div class="D">10</div>
<div class="D">11</div>
<div class="D">12</div>
<div class="D">10</div>
<div class="D">11</div>
<div class="D">12</div>
</div>
</div>
I am using CSS Grid and have made the following layout in the codepen found here: https://codepen.io/alexg2195/pen/xLEeMd
My issue is that when using repeat(auto-fill, minmax(400px, 1fr)); I end up with a layout that goes beyond just two columns.
Is there a way to force two columns but still have the same min auto fill resize behaviors?
body {
margin: 40px;
}
.layout {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 100px;
grid-template-areas: "main btn" "main .";
}
.btn {
grid-area: btn;
background-color: #444;
color: #ddd;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.boxes {
grid-area: main;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
<div class="layout">
<div class="boxes">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
</div>
<div class="btn">BTN</div>
</div>
Is there a way to force two columns but still have the same min auto fill resize behaviors?
Not with auto-fill / auto-fit.
These functions are built to fit the largest number of tracks without overflowing the container.
7.2.2.2. Repeat-to-fill: auto-fill and auto-fit
repetitions
When auto-fill is given as the repetition number, if the grid
container has a definite size or max size in the relevant axis, then
the number of repetitions is the largest possible positive integer
that does not cause the grid to overflow its grid container.
In order to "auto-fill" a maximum of two columns per row, you'll need to find another method.
Maybe flexbox?
revised demo
body {
margin: 40px;
}
.layout {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 100px;
grid-template-areas: "main btn" "main .";
}
.btn {
grid-area: btn;
background-color: #444;
color: #ddd;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.boxes {
grid-area: main;
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 0 40%;
margin: 5px;
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
div.box.n {
visibility: hidden; /* https://stackoverflow.com/q/42176419/3597276 */
height: 0;
}
<div class="layout">
<div class="boxes">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
<div class="box n">N</div>
</div>
<div class="btn">BTN</div>
</div>