I would like to align horizontally on a single line a bunch of divs of class a within a container div.
Why is the below css code not working ?
.a {
border: 1px solid black;
}
#container {
display:grid;
grid-auto-columns: minmax(10px, 35px);
grid-template-rows:1fr;
}
I have created a jsFiddle for it. I was expecting the divs 1 to 6 there to all be on the same line but I get the following result :
You need to change the default flow ref to column:
.a {
border: 1px solid black;
}
#container {
display: grid;
grid-auto-columns: minmax(10px, 35px);
grid-template-rows: 1fr;
grid-auto-flow:column; /* added */
}
<div id="container">
<div class="a">
1
</div>
<div class="a">
2
</div>
<div class="a">
3
</div>
<div class="a">
4
</div>
<div class="a">
5
</div>
<div class="a">
6
</div>
</div>
Or define a template column like below:
.a {
border: 1px solid black;
}
#container {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(10px, 35px));
grid-template-rows: 1fr;
}
<div id="container">
<div class="a">
1
</div>
<div class="a">
2
</div>
<div class="a">
3
</div>
<div class="a">
4
</div>
<div class="a">
5
</div>
<div class="a">
6
</div>
</div>
Try below code:
CSS:
#container {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
grid-gap: 1rem;
}
Note: Its align horizontally on a single line.
Related
I'm playing around with Css Grid and having problems with fitting overlaying content.
There is a top level container defined as css grid (class="container"), then content grid (class="content") which splits into 3 rows (header, label, rows).
Header is just a header, label contains labels for rows and rows is a content of "table".
Here is what it looks like:
When I resize window I got scroll bar on the right but it's for the whole page. Instead I would like to scroll only rows not the whole page.
Here is the the StackBlitz working example:
https://stackblitz.com/edit/angular-ivy-ayujp5
I guess it's simple but having problems with understanding how height is calculated and where and how overflow properties should be defined.
p {
font-family: Lato;
}
.container {
display: grid;
grid-template-columns: 30px 1fr 30px;
grid-template-rows: 30px 1fr 30px;
grid-template-areas: '. . .' '. content .' '. . .';
}
.content {
grid-area: content;
display: grid;
grid-template-rows: 50px 30px 1fr;
grid-template-areas: 'header' 'label' 'rows';
}
.header {
grid-area: header;
}
.label {
grid-area: label;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 4fr);
align-items: center;
}
.rows {
grid-area: rows;
height: 100%;
}
.row {
background-color: pink;
margin: 5px 0px;
border-width: 1px;
border-radius: 10px;
padding: 25px;
color: black;
}
<div class="container">
<div class="content">
<div class="header">Header</div>
<div class="label">
<div>Name</div>
<div>From</div>
<div>To</div>
</div>
<div class="rows">
<div class="row">
<div class="label">
<div>1</div>
<div>1999/01/01</div>
<div>1999/12/01</div>
</div>
</div>
<div class="row">
<div class="label">
<div>2</div>
<div>1999/01/01</div>
<div>1999/12/01</div>
</div>
</div>
<div class="row">
<div class="label">
<div>2</div>
<div>1999/01/01</div>
<div>1999/12/01</div>
</div>
</div>
<div class="row">
<div class="label">
<div>3</div>
<div>1999/01/01</div>
<div>1999/12/01</div>
</div>
</div>
<div class="row">
<div class="label">
<div>4</div>
<div>1999/01/01</div>
<div>1999/12/01</div>
</div>
</div>
</div>
I go with height calculation .pin-table { height: calc(100vh - 125px); overflow: auto; } but if anyone has better idea feel free to write.
I have a app which has rows and columns. I can dynamically remove rows. When I remove them then the other items distribute themself equaly over the width of the grid.
Now I want to have something like flex, but with grid. The grid items should have a margin to the next item beside them. Like that. And not distribute themself over the width.
CSS
.column {
padding: 10px;
margin: 10px 0;
display: grid;
grid-auto-flow: column;
.row-item {
text-align: center;
display: grid;
grid-auto-rows: 25px;
grid-row-gap: 10px;
width: 9vw;
}
}
HTML
<div class="column">
<ng-container *ngFor="let jS of journeyStepDisplay">
<div *ngIf="jS.display" class="row-item">
<div class="column-item header">
<p>{{ jS.name }}</p>
</div>
</div>
</ng-container>
</div>
If you have a minimum and/or a max width of the grid items that are to be distributed, you can use a combination of different grid properties to get the desired outcome, like
grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
In the example below, we have a grid where the items will be distributed evenly with a min/max width of 100px. If they can't fit into the row a new row will be inserted.
.container {
height: 200px;
width: 600px;
gap: 5px;
border: 2px solid red;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
grid-template-rows: auto;
padding: 10px;
}
.box {
border: 2px solid blue;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
You have to declare width for each item.
<div class="column">
<div class="row-item">
<div class="column-item header">
<p>ciao</p>
</div>
</div>
<div class="row-item">
<div class="column-item header">
<p>ciao2</p>
</div>
</div>
<div class="row-item">
<div class="column-item header">
<p>ciao3</p>
</div>
</div>
</div>
.column {
width: 100%;
display: grid;
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: auto;
}
.row-item {
text-align: center;
}
here a useful guide.
(I didn't use directive from angular, but you can add it)
I am trying to build a minor template, more specific this is what I am trying to do in css grid layout:
I am not convinced that my way is the modern approach, and would like to know if there is a pure way of doing this in only css grid, instead of mixing it with hights?
This is my fiddle of what I have tried:
https://jsfiddle.net/uwbsd2g6/
.wrapper {
display: grid;
grid-template-columns: 50% 50%;
}
.wrapper .col {
border: 1px solid blue;
min-height: 500px;
}
.wrapper .col-v-1 {
height: 50%;
}
.wrapper .col-v-2 {
height: 50%;
color: #fff;
background-color: blue;
}
<div class="wrapper">
<div class="col">
<div class="col-v-1">Here is some text</div>
<div class="col-v-2">Heres is another text</div>
</div>
<div class="col">
This is a third text
</div>
</div>
You can do this purely with css grid (assuming that you have an element with 100% height of the container as the parent) by using grid-template-column and grid-template-row as seen below
<style>
.wrapper {
height:100vh;
}
.outline{
outline: 1px red solid;
}
.grid {
display:grid
}
.grid-cols-2 {
grid-template-columns: 1fr 1fr;
}
.grid-rows-2 {
grid-template-rows: 1fr 1fr;
}
</style>
<div class="wrapper outline grid grid-cols-2">
<div class="grid grid-rows-2 outline">
<div class="outline">Here is some text</div>
<div class="outline">Heres is another text</div>
</div>
<div class="outline">
This is a third text
</div>
</div>
You can do it with grid template column and row
.parent{
border:1px solid red;
display:grid;
grid-template-columns: repeat(12, 1fr);
}
.child{
background:green;
align-self:center;
}
<div class="parent">
<div class="child" style="justify-self: center;">
I am child
</div>
</div>
I am looking a solution to let child should align itself to center. so i can create a class name for left, right, and center will use across.
What's happening here for you is automatic grid placement. Technically speaking the item is aligned to the center inside the first column you created. The problem is that it ends up all the way on the left because that's where your first column actually is.
There's a few ways you can approach this if you want to continue using CSS Grid for this layout concept. But the problem with a 12 col grid is that there won't be a "center" without some offsetting or transforms.
I recommend you use the following if you really only need one row with 3 possible placements. It's a 13 col grid with a defined height of a single row, this ensures if the items are being shuffled out of order (if left is second like my example) that they won't jump to a second implied row.
.parent{
border:1px solid red;
display:grid;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: 60px;
}
.center{
background:green;
grid-column: 7/8;
grid-row: 1/2;
}
.left {
background: red;
grid-column: 1/2;
grid-row: 1/2;
}
.right {
background: blue;
grid-column: 13/14;
grid-row: 1/2;
}
<div class="parent">
<div class="center">
I am child
</div>
<div class="left">
Me too
</div>
<div class="right">
Also me
</div>
</div>
Edit: You can also use flexbox and drop some of the complexity and get better responsiveness by using the order property and justifying the content as space-between.
.parent {
border: 1px solid red;
display: flex;
justify-content: space-between;
}
.center {
background: green;
order: 2
}
.left {
background: red;
order: 1
}
.right {
background: blue;
order: 3
}
<div class="parent">
<div class="center">
I am child
</div>
<div class="left">
Me too
</div>
<div class="right">
Also me
</div>
</div>
Here is an optimized version with flexible values that can work with any number of columns.
I will consider CSS variables to easily adjust the template and the center element. For the left and right we only need 1 and -1
.parent{
--n:6;
display:grid;
grid-template-columns: repeat(calc(2*var(--n)), 1fr);
grid-auto-flow:dense;
margin:5px;
outline:1px solid;
}
.left{
grid-column-start:1;
}
.right{
grid-column-end:-1;
text-align:right;
}
.center {
grid-column:calc(var(--n))/span 2;
text-align:center;
}
.parent > * {
border:1px solid red;
}
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center
</div>
</div>
<div class="parent" style="--n:3">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center
</div>
</div>
<div class="parent" style="--n:10">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center
</div>
</div>
.parent {
border: 1px solid red;
display: grid;
grid-template-columns: repeat(1, 1fr);
}
I have html div like
div A
div B
Div D
div c
Div E
i want structure like
div A Div C
div B div D
Div E
i did for
.c {
top: 0;
right: 220px;
position: absolute;
}
now div c is in top,Next i want Div D
.d {
top: 566px;
position: absolute;
right: 291px;
}
i can adjust this but problem is that when i extend content from Div c it will overlap to div D?How can i move Div D under Div C?please help
Here is my code
<div>
<ul>
<li>
<h3>Our Team</h3>
</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li style="top:20px; position:absolute; right:120px">e</li>
<li style="top:20px; position:absolute; right:120px">f</li>
</ul>
</div>
You Can use CSS Grid Instead:
Complete Grid Guide
First Define your Grid Template Areas:
grid-template-areas: "i1 i3" ". ." "i2 i4" "i5 .";
grid-template-rows: repeat(4,1fr);
grid-template-areas: Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property
each "" refer to row.
For example: first row have two columns:
1- i1 takes 1 of 2 from the first row.
2- i2 takes 1 of 2 from the first row.
grid-template-rows: repeat(4,1fr): will make sure that all rows have same height (even empty ones).
To apply this area to div:
1- Define the div in html:
<div class="item i1">Div A</div>
2- add to css:
.i1 { grid-area: i1}
and so on.
Working Demo:
.grid {
display: grid;
grid-template-areas: "i1 i3" ". ." "i2 i4" "i5 .";
grid-template-rows: repeat(4, 1fr);
grid-gap: 10px;
margin: 25px;
}
.i1 {
grid-area: i1
}
.i2 {
grid-area: i2
}
.i3 {
grid-area: i3
}
.i4 {
grid-area: i4
}
.i5 {
grid-area: i5
}
.item {
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}
<div class="grid">
<div class="item i1">Div A</div>
<div class="item i2">Div B</div>
<div class="item i3">Div C</div>
<div class="item i4">Div D</div>
<div class="item i5">Div E</div>
</div>
You can use columns are rows to create that layout
Demo:
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="column">
<div class="a">div a</div>
</div>
<div class="column">
<div class="c">div c</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="b">div b</div>
</div>
<div class="column">
<div class="d">div d</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="e">div e</div>
</div>
</div>
You can use CSS Grids if you just want to adjust the content
[Updated]I was warned that you want a specific position so I made the changes that can solve the problem
main{max-width: 1170px; margin:0 auto; background:#f8f8f8; min-height:100vh;}
.grid-div div { border:1px solid #ccc; background: #f0f0f0; min-height:150px; }
.grid-div {
display:grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.a{grid-column: 1; grid-row: 1; }
.b{grid-column: 1; grid-row: 2; margin-top:60px; }
.c{grid-column: 2; grid-row: 1; }
.d{grid-column: 2; grid-row: 2; margin-top:60px; }
.e{grid-column: 1; grid-row: 3; }
.f{grid-column: 2; grid-row: 3; }
<DOCTYPE html>
<html>
<head>
<title>Grid Test</title>
</head>
<body>
<main>
<div class="grid-div">
<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>
</main>
</body>
<html>
if you want to check more options to use in grid see here https://www.w3schools.com/css/css_grid.asp