This question already has answers here:
Centering in CSS Grid
(9 answers)
Closed 7 months ago.
I have this in html
body {
margin: 10px;
text-align: center;
width: 380px;
}
.row {
display: grid;
grid-template-columns: 180px 180px 180px 180px;
grid-gap: 10px;
}
.item {
color: white;
padding: 1.5em 0;
font-size: 2em;
justify-content: center;
}
.a {
background: #0d9;
}
.b {
background: #d90;
}
.c {
background: #9d0;
}
.d {
background: #90d;
}
.e {
background: #d09;
}
.f {
background: #09d;
}
.g {
background: #09d;
}
.h {
background: #09d;
}
<div class="row">
<!--main divs-->
<div class="item a" id="adventureHolidays">
<p>Adventure Holidays</p>
</div>
<div class="item b" id="backpacking">
<p>Backpacking</p>
</div>
<div class="item c" id="cruiseHolidays">
<p>Cruise Holidays</p>
</div>
<div class="item d" id="eventTravel">
<p>Event Travel</p>
</div>
<div class="item e" id="packageHoliday">
<p>Package Holiday</p>
</div>
<div class="item f" id="safari">
<p>Safari</p>
</div>
<div class="item g" id="skiingAndSnowboarding">
<p>Skiing and Snowboarding</p>
</div>
<div class="item h" id="volunteering">
<p>Volunteering</p>
</div>
</div>
I tried a lot of tricks from already asked questions here and no one works for me, every time my grid is or bad positioned or nothing changed. I tried with place-items: center; but then I don't have gap between them, also tried with justify-content: center; but then all my divs are one below other. And also, How I can put it a bit down? Any help?
Use the following CSS:
body {
margin: 10px;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
}
Add the following CSS:
.item {
display: grid;
}
.item p {
margin: auto;
}
Related
This question already has answers here:
Is there a way to center one of the flex/grid children(more than three) and with different widths?
(2 answers)
Closed 1 year ago.
I need to center an element #center-navigation relative to the page center and then position the two another on the left (#logo) and right (#contacts) sides of the element. Currently in my implementation #center-navigation is not centered on the page. Is it possible to do with flexbox?
#row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#logo {
height: 20px;
width: 80px;
background-color: red;
margin-right: auto;
}
#contacts {
margin-left: auto;
}
h1 {
text-align: center;
}
<div id="row">
<div id="logo">
</div>
<div id="center-navigation">
Some navigation here
</div>
<div id="contacts">
example#mail.org
</div>
</div>
<h1>
Some long website title goes here
</h1>
You can try with css grid :
#row {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
justify-content: space-between;
align-items: center;
text-align: center;
}
#logo {
height: 20px;
width: 80px;
background-color: red;
}
#contacts {
background-color: blue;
text-align: right;
}
#center-navigation {
background-color: green;
}
h1 {
text-align: center;
background-color: yellow;
}
<div id="row">
<div id="logo">
</div>
<div id="center-navigation">
Some navigation here
</div>
<div id="contacts">
example#mail.org
</div>
</div>
<h1>
Some long website title goes here
</h1>
It is impossible to do with flexbox!
I suggest you to use position:absolute.
#row {
/*display: flex;*/
/*flex-direction: row;*/
/*justify-content: center;*/
/*align-items: center;*/
text-align:center;
position:relative;
}
#logo,#contacts{
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}
#logo {
height: 20px;
width: 80px;
background-color: red;
margin-right: auto;
}
#contacts {
margin-left: auto;
left:auto;
right:0;
}
h1 {
text-align: center;
}
<div id="row">
<div id="logo">
</div>
<div id="center-navigation">
Some navigation here
</div>
<div id="contacts">
example#mail.org
</div>
</div>
<h1>
Some long website title goes here
</h1>
The #contacts width should be equal to the #logo width.
#contacts, #logo{
width: 20%
}
This question already has an answer here:
Why are CSS named grid areas not in quotes?
(1 answer)
Closed 2 years ago.
This may be obvious but I have been stuck on it for a while and have searched stackoverflow to no avail.
Everywhere I have a grid-area value I am getting "invalid property value" in google chrome when looking at the elements.
The content is simply being placed in the 3rd grid item on the left when it should be in the 4th.
.dashboard {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 50px auto;
grid-template-areas:
"left top"
"left content";
height: 100vh;
}
.left-nav {
grid-area: "left";
}
.top-nav {
grid-area: "top";
}
.content {
grid-area: "content";
}
<div class="dashboard">
<div class="left-nav">
LEFT
<app-left-nav></app-left-nav>
</div>
<div class="top-nav">
TOP
<app-top-nav></app-top-nav>
</div>
<div class="content">
CONTENT
<router-outlet></router-outlet>
</div>
</div>
You should have the attribute value without quotes grid-area: top;:
.dashboard {
display: grid;
grid-template-areas:
'left top'
'left content';
height: 100vh;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.dashboard > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.left-nav {
grid-area: left;
}
.top-nav {
grid-area: top;
}
.content {
grid-area: content;
}
<div class="dashboard">
<div class="left-nav">
LEFT
<app-left-nav></app-left-nav>
</div>
<div class="top-nav">
TOP
<app-top-nav></app-top-nav>
</div>
<div class="content">
CONTENT
<router-outlet></router-outlet>
</div>
</div>
I have a problem with how i am supposed to center my text in the middle of the box and get my number (01, 02 etc) in the top left corner?
I am using flexbox to first center all my contents and then align-self my heading to flex start. All fine and dandy but as you can see my heading is not in the top right corner. How would i make sure the heading is in the top left corner and my text is in the center of the box and not slightly off center?
I have tried to set margin right on auto to push the heading to the left, it works but my text is then pushed all the way to the right.
How would I go ahead of fixing this?
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.box {
min-height: 354.48px;
max-height: 354.48px;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.box h2 {
font-size: 2rem;
}
.how-it-works {
background-color: #c7ddea;
}
.O1 {
background-color: white;
}
.O1 h2 {
align-self: flex-start;
}
.O2 {
background-color: #e7e7e7;
}
.O2 h2 {
align-self: flex-start;
}
.O3 {
background-color: #fff;
}
.O3 h2 {
align-self: flex-start;
}
.O4 {
background-color: #f17949;
}
.O4 h2 {
align-self: flex-start;
}
.O5 {
background-color: #fff;
}
.O5 h2 {
align-self: flex-start;
}
<footer>
<div class="box how-it-works">
<h1>How it works?</h1>
</div>
<div class="box O1">
<h2>01</h2>
<p>Answer a few questions about yourself</p>
</div>
<div class="box O2">
<h2>02</h2>
<p>Choose a plan. Get a quote.</p>
</div>
<div class="box O3">
<h2>03</h2>
<p>Answe some questions about your medical history</p>
</div>
<div class="box O4">
<h2>04</h2>
<p>Wait 90 sec to get approved.</p>
</div>
<div class="box O5">
<h2>05</h2>
<p>Done!</p>
</div>
</footer>
You could do something like this:
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.box {
position: relative;
min-height: 354.48px;
max-height: 354.48px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem;
}
.box h2 {
font-size: 2rem;
line-height: 0;
position: absolute;
top: 1rem;
left: 1rem;
}
.box p {
text-align: center;
}
.how-it-works {
background-color: #c7ddea;
}
.O1 {
background-color: white;
}
.O2 {
background-color: #e7e7e7;
}
.O3 {
background-color: #fff;
}
.O4 {
background-color: #f17949;
}
.O5 {
background-color: #fff;
}
<footer>
<div class="box how-it-works"><h1>How it works?</h1></div>
<div class="box O1">
<h2>01</h2>
<p>Answer a few questions about yourself</p>
</div>
<div class="box O2">
<h2>02</h2>
<p>Choose a plan. Get a quote.</p>
</div>
<div class="box O3">
<h2>03</h2>
<p>Answe some questions about your medical history</p>
</div>
<div class="box O4">
<h2>04</h2>
<p>Wait 90 sec to get approved.</p>
</div>
<div class="box O5">
<h2>05</h2>
<p>Done!</p>
</div>
</footer>
If I understood well what you need, one solution could be adding this to .box class:
.box{
flex-direction: column;
}
I need to have different layouts for a dashboard. I need only horizontal scroll for layout-container if the items exceed to fit in a visible viewport. I came across a layout with the following requirements.
I have created the layout style using CSS-flexbox, but could not get the horizontal scroll, got the vertical scroll only.
html,
body {
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.flexbox {
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: auto;
background-color: lightgreen;
}
.item {
min-width: 50%;
min-height: 50%;
flex: 1 0 0;
border: 1px solid;
}
.item:nth-child(odd) {
background-color: lightblue;
}
.item:nth-child(even) {
background-color: lightslategray;
}
.item1 {
min-width: 100%;
}
<div class="flexbox">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">4</div>
<div class="item item2">5</div>
<div class="item item3">6</div>
</div>
https://codepen.io/TechnoGeek/pen/GdZodo
So, I thought, CSS grid can help with this. So I tried something but did not understand how to get it.
html,
body {
height: 100%;
margin: 0px;
}
.grid {
display: grid;
height: 100%;
background-color: lightgreen;
grid-template-columns: repeat(2, 1fr);
grid-template-row: repeat(2, 1fr);
grid-gap: 5px;
/* grid-auto-flow: column; */
}
.item {
border: 1px solid;
}
.item:nth-child(odd) {
background-color: lightblue;
}
.item:nth-child(even) {
background-color: lightslategray;
}
.item1 {
grid-column: 1/3;
}
<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">4</div>
<div class="item item2">5</div>
<div class="item item3">6</div>
</div>
https://codepen.io/TechnoGeek/pen/BxKoaG
In the grid layout, items are shrinking to fit within the layout.
The number of items inside the container is dynamic. Irrespective of the item count the layout must maintain the structure for each visible group.
Can someone help how to achieve this?
Thanks in advance.
I found a satisfactory answer using CSS Grid layout.
In the grid layout, items are shrinking to fit within the layout.
I have defined the grid lines using fr in my question that is why the items are shrinking. Now I have used % because I want the cell items to flow out of visible area to produce scroll if needed.
and span keyword in defining grid cell areas helped a lot for auto placement of grid cells.
From MDN: span && [ <integer> || <custom-ident> ]
Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge.
html,
body {
height: 100%;
margin: 0px;
}
.grid {
display: grid;
height: 100%;
background-color: lightgreen;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
/*grid-gap: 5px;*/
grid-auto-columns: 50%;
grid-auto-flow: column;
}
.item {
border: 1px solid;
grid-area: span 1 / span 1;
}
.item:nth-child(odd) {
background-color: lightblue;
}
.item:nth-child(even) {
background-color: lightslategray;
}
.item1 {
grid-area: span 1/ span 2;
}
<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">4</div>
<div class="item item2">5</div>
<div class="item item3">6</div>
</div>
For horizontal scroll the simplest solution would be to create a separate container for each view. Then make the overall container (body) a flex container in row direction.
body {
display: flex;
margin: 0;
}
.flexbox {
flex: 0 0 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
background-color: lightgreen;
}
.item {
flex: 1 0 50%;
min-height: 50%;
border: 1px solid;
}
.item1 {
flex-basis: 100%;
}
.item:nth-child(odd) {
background-color: lightblue;
}
.item:nth-child(even) {
background-color: lightslategray;
}
* {
box-sizing: border-box;
}
<div class="flexbox">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
<div class="flexbox">
<div class="item item1">4</div>
<div class="item item2">5</div>
<div class="item item3">6</div>
</div>
The main trick is to add grid-auto-flow: column; to your container's display grid css styles.
For Example
.container-grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(20rem, 20rem));
grid-auto-flow: column;
overflow-x: auto;
}
try to add class with this style to the element that you want to have horizontal scroll on it
display: block;
width: 99%;
overflow-x: auto;
This question already has answers here:
Centering in CSS Grid
(9 answers)
Closed 3 years ago.
Using CSS-Grid, I try to put my items in the center of a grid cell, without shrinking them completely to only the content. Is this possible?
I made a simple example on stackblitz. You can see that the items there don't fill the entire grid-cell with the background color. What is the proper way to get that working? I can remove the justify-items/align-items classes, but then the content isn't centered anymore.
https://stackblitz.com/edit/angular-8bggtq?file=app/app.component.html
Cells filled, but content not in center:
Cells not filled, but content is centered:
.wrapper {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
justify-items: center;
align-items: center;
}
.item {
//justify-self: stretch;
//align-self: stretch;
}
.one {
background: red;
}
.two {
background: pink;
}
.three {
background: violet;
}
.four {
background: yellow;
}
.five {
background: brown;
}
.six {
background: green;
}
html,
body {
margin: 0;
}
<div class="wrapper">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
<div class="item five">5</div>
<div class="item six">6</div>
</div>
The HTML structure of a grid container has three levels:
the container
the items (the children of the container)
the content (the grandchildren of the container and children of the items)
The problem you're having is that you're taking a two-level approach instead of the correct three-level approach. When you set align-items and justify-items on the container, they apply to the grid items, not to the content.
That's exactly what you are seeing: The grid items are being vertically and horizontally centered.
If you want to center the grid item children (the content), you need to specify that on the items. You can repeat on the items what you did on the container:
.item {
display: grid;
justify-items: center;
align-items: center;
}
Or, if you don't need grid layout in the items, here's another simple method:
.item {
display: flex;
justify-content: center;
align-items: center;
}
The above concepts apply to flex containers, as well.
For a more complete explanation and other centering methods see this post: Centering in CSS Grid
.wrapper {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.item {
display: flex;
align-items: center;
justify-content: center;
}
.one { background: red; }
.two { background: pink; }
.three { background: violet; }
.four { background: yellow; }
.five { background: brown; }
.six { background: green; }
body { margin: 0; }
<div class="wrapper">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
<div class="item five">5</div>
<div class="item six">6</div>
</div>
I would say the only way to do that just with CSS-grid is to insert a additional element- / grid-level.
However, I would also say that here - as #Zuber has already showed - the combination between grid and flexbox is the best way to achieve what you want.
Grid is designed to be used with flexbox, not instead of it
Ollie Williams: Things I’ve Learned About CSS Grid Layout
Pure Grid-example:
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 20px; }
.wrapper {
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 20px;
}
.wrapper__item {
display: grid;
align-items: center;
justify-items: center;
background: gray;
color: white;
font-size: 2em;
}
<div class="wrapper">
<div class="wrapper__item"><span>1</span></div>
<div class="wrapper__item"><span>2</span></div>
<div class="wrapper__item"><span>3</span></div>
<div class="wrapper__item"><span>4</span></div>
<div class="wrapper__item"><span>5</span></div>
<div class="wrapper__item"><span>6</span></div>
</div>
Grid- & Flexbox-example:
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 20px; }
.wrapper {
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 20px;
}
.wrapper__item {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: gray;
color: white;
font-size: 2em;
}
<div class="wrapper">
<div class="wrapper__item">1</div>
<div class="wrapper__item">2</div>
<div class="wrapper__item">3</div>
<div class="wrapper__item">4</div>
<div class="wrapper__item">5</div>
<div class="wrapper__item">6</div>
</div>
you need to add some css in the class "item"
.item {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Try with justify-self: center or text align:center if it is only text.