.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Question: how to make that 1 column is center and after it rest of the columns.
Now the whole grid is centered
Use margin-left: calc(50% - 40%); on flex-container. This way it is always dynamic with the calc. Then you can set width: 10%; on your flex-item's.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: calc(50% - 40%);
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
width: 10%;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
I got another solution for you ..
Here is without gap. You can play with width to resize boxes
.flex-item{
width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
background-color: bisque;
display: grid;
place-content: center;
overflow:hidden;
}
.container{
width: 100vw;
height: 10rem;
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
}
.half-container{
grid-column: 1;
border: 1px solid black;
}
.flex-container {
grid-column: 2;
display: grid;
grid-template-columns: repeat(4,1fr);
/* gap: 1rem; */
align-items: center;
justify-content: center;
position: relative;
}
.flex-item {
background: tomato;
height: 100px;
width: 100%;
display: grid;
place-content: center;
transform: translate(-50%);
}
.flex-item p{
color: white;
font-weight: bold;
font-size: 3em;
}
.flex-item::before{
position: absolute;
content: "";
width: 50%;
height: 100%;
border-right: 1px solid black;
}
<div class="container">
<div class="half-container"></div>
<div class="flex-container">
<div class="flex-item">
<p>1</p>
</div>
<div class="flex-item">
<p>2</p>
</div>
<div class="flex-item">
<p>3</p>
</div>
<div class="flex-item">
<p>4</p>
</div>
</div>
</div>
Here is with gap
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
background-color: bisque;
display: grid;
place-content: center;
overflow:hidden;
}
.container{
width: 100vw;
height: 10rem;
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
}
.half-container{
grid-column: 1;
border: 1px solid black;
}
.flex-container {
grid-column: 2;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 2rem;
align-items: center;
justify-content: center;
position: relative;
}
.flex-item {
background: tomato;
height: 100px;
width: 100%;
display: grid;
place-content: center;
transform: translate(-50%);
}
.flex-item p{
color: white;
font-weight: bold;
font-size: 3em;
}
.flex-item::before{
position: absolute;
content: "";
width: 50%;
height: 100%;
border-right: 1px solid black;
}
<div class="container">
<div class="half-container"></div>
<div class="flex-container">
<div class="flex-item">
<p>1</p>
</div>
<div class="flex-item">
<p>2</p>
</div>
<div class="flex-item">
<p>3</p>
</div>
<div class="flex-item">
<p>4</p>
</div>
</div>
</div>
Related
I am trying to create an UI with components arranged in the order as shown in the picture?
I am building a Material UI Dialog in React application with the following design proposal.
I am trying to flex box. I tried using the concepts as in the https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax#the_flex-grow_property
but I am not able to achieve the result. Can the components be arranged as in the picture otherwise I will have to ask my client to reconsider the design decision which I am not sure will be possible but before I want to confirm the design possibility.
If it is possible to achieve, can anyone please give me a lead?
This is a solution for the template you showed but using the grid template instead of flex.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
font-family: sans-serif;
font-size: 20px;
}
.container{
--gap: .20rem;
display: grid;
grid-template-columns: minmax(200px, auto) repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: var(--gap);
padding: var(--gap);
height: 100vh;
}
.container > *{
border: solid 1px darkgray;
display: block;
background: lightgray;
}
.side{
grid-row: span 3;
}
.header, .footer{
grid-column: span 3;
}
.box{
display: flex;
align-items: center;
justify-content: center;
}
/* Demo content */
.side::before,
.header::before,
.footer::before
{
color: #444;
font-size: 1rem;
padding: 0 .5em;
border-bottom: solid 1px #777;
display: block;
}
.side::before{
content: 'sidebar';
}
.header::before{
content: 'header';
}
.footer::before{
content: 'footer';
}
.container > .box:nth-child(3)::before{
height: 70%;
/*content: attr(data-height);*/ /*I wished it worked but it didn't*/
}
.container > .box:nth-child(4)::before{
height: 40%;
}
.container > .box:nth-child(5)::before{
height: 90%;
}
.box::before{
color: #ccc;
background: red;
border: solid 1px darkred;
width: 100%;
display: block;
content: '';
text-align: center;
padding: .2em 1em;
font-size: .8rem;
content: 'height: ' attr(data-height);
}
<div class="container">
<div class="side"></div>
<div class="header"></div>
<div class="box" data-height="70%"></div>
<div class="box" data-height="40%"></div>
<div class="box" data-height="90%"></div>
<div class="footer"></div>
</div>
It is definitely possible with Flexbox. Here is an example:
.block {
border: 2px solid black;
padding: 8px;
}
.container {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 8px;
}
.first-column {
width: 100px;
}
.second-column {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.second-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.second-row>* {
flex-grow: 1;
}
.third-row {
text-align: center;
}
<div class="block container">
<div class="block first-column">
row 1
</div>
<div class="second-column">
<div class="block">
row 1
</div>
<div class="second-row">
<div class="block">
row 2
<br /> row 2
<br /> row 2
</div>
<div class="block">
row 2
<br /> row 2
</div>
<div class="block">
row 2
</div>
</div>
<div class="block third-row">
row 3
<br />
<br />
<br /> row 3
</div>
</div>
</div>
I have a simple web page with a header, a content section and a footer. My content section has uses css grid. I want the content to take up all of the space between the header and the footer with the header and footer always visible on the page. I find that with no images, this works. I can resize the screen and the footer is always visible.
However, after adding tags within the grid divs, the footer is pushed off the page.
Here is a JS Fiddle with no images:
https://jsfiddle.net/7p3mbquk/
Here is a JS fiddle with images
https://jsfiddle.net/Lrm8gbue/4/
Notice how when you reduce the width of the screen, the footer gets pushed down below the window.
Brett Donald offered a solution below that works in chrome.
Why does it not work the same in Safari v14.1.2?
In this image, I have the site running in safari on the left hand side and Chrome v96.0 in the right hand side.
Here is my CSS...
body {
margin: 0;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 99vh;
}
.header {
flex-basis: 10px;
grid-area: header;
display: flex;
justify-content: space-between;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
height: 100%;
}
.footer {
flex-basis: 10px;
grid-area: footer;
display: flex;
justify-content: flex-start;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
height: 100%;
}
.content {
flex-basis: 1 0 1fr;
height: 100%;
align-self: top;
grid-area: content;
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
}
.content .description {
text-align: center;
font-size: clamp(1rem, 3vw, 2rem);
font-family: verdana;
/* text-shadow: 2px 2px white; */
padding: 1rem;
}
.oval {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
background-color: #ccc;
border: 5px solid black;
border-radius: 100px / 100px;
box-shadow: 2px 2px white;
margin: 1rem 1rem;
}
.content > .photos {
flex-grow: 4;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fill, 1fr);
align-content: center;
align-content: stretch;
}
#media (min-width: 700px) {
.content > .photos {
grid-template-columns: repeat(3, 1fr);
}
}
#media (min-width: 800px) {
.content > .photos {
grid-template-columns: repeat(4, 1fr);
}
}
.content > .photos > div {
background-color: yellow;
border: 1px solid black;
justify-content: center;
}
.content > .photos img {
width: 100%;
max-height: 100%;
object-fit: cover;
}
Here is my markdown
<head>
<link rel="stylesheet" href="./main.css" />
<script type="module" src="./main.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<p class="coname">Momo's Surf School</p>
<p class="contact">Contact</p>
</div>
<div class="content">
<div class="oval">
<div class="description">
Make your holiday amazing with a fun, relaxing day learning to surf
with Mo!
</div>
</div>
<div class="photos">
<div><img src="./assets/woman.jpg" /></div>
<div><img src="./assets/women.jpg" /></div>
<div><img src="./assets/man.jpg" /></div>
<div><img src="./assets/woman3.jpg" /></div>
<div><img src="./assets/woman2.jpg" /></div>
<div><img src="./assets/waves.jpg" /></div>
<div><img src="./assets/twoBoys.jpg" /></div>
<div><img src="./assets/barrel.jpg" /></div>
</div>
</div>
<div class="footer"><p>Established 2013</p></div>
</div>
</body>
Your content div needs an overflow-y: scroll; rule. And I got rid of your flex-basis rules.
Is this the effect you are after?
body {
margin: 0;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
grid-area: header;
display: flex;
justify-content: space-between;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
}
.footer {
grid-area: footer;
display: flex;
justify-content: flex-start;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
}
.content {
align-self: top;
grid-area: content;
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
overflow-y: scroll;
}
.content .description {
text-align: center;
font-size: clamp(1rem, 3vw, 2rem);
font-family: verdana;
/* text-shadow: 2px 2px white; */
padding: 1rem;
}
.oval {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
background-color: #ccc;
border: 5px solid black;
border-radius: 100px / 100px;
box-shadow: 2px 2px white;
margin: 1rem 1rem;
}
.content > .photos {
flex-grow: 4;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fill, 1fr);
align-content: center;
align-content: stretch;
}
#media (min-width: 700px) {
.content > .photos {
grid-template-columns: repeat(3, 1fr);
}
}
#media (min-width: 800px) {
.content > .photos {
grid-template-columns: repeat(4, 1fr);
}
}
.content > .photos > div {
background-color: yellow;
border: 1px solid black;
justify-content: center;
line-height: 0;
}
.content > .photos img {
width: 100%;
max-height: 100%;
object-fit: cover;
}
<body>
<div class="container">
<div class="header">
<p class="coname">Momo's Surf School</p>
<p class="contact">Contact</p>
</div>
<div class="content">
<div class="oval">
<div class="description">
Make your holiday amazing with a fun, relaxing day learning to surf
with Mo!
</div>
</div>
<div class="photos">
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
</div>
</div>
<div class="footer"><p>Established 2013</p></div>
</div>
</body>
.layout {
display: grid;
grid-template-columns: 1fr 11fr;
grid-auto-rows: minmax(100vh, auto);
}
.layout_menu {
height: 90vh;
grid-row: 0.3333333333;
}
.layout_menu-menu {
display: flex;
writing-mode: vertical-rl;
overflow: auto;
max-height: 75vh;
align-items: flex-start;
}
.layout_menu-menu-link {
padding: 2rem 0rem;
font-size: large;
}
.layout_menu-menu-link a {
color: #dff0e5;
text-decoration: none;
}
.layout_menu-menu-link a:hover {
color: #696969;
}
.layout_menu-logo {
width: 5rem;
height: 5rem;
margin: 1rem 0rem;
}
.cont {
border: greenyellow 1px solid;
}
<div class="layout">
<div class="layout_menu">
<img class="layout_menu-logo" src="assets/H_logo.png" alt="H Logo" />
<div class="layout_menu-menu">
<div class="layout_menu-menu-link">page1</div>
<div class="layout_menu-menu-link">page2</div>
<div class="layout_menu-menu-link">page3</div>
<div class="layout_menu-menu-link">page4</div>
<div class="layout_menu-menu-link">page5</div>
</div>
</div>
<div class="layout_main cont">
</div>
</div>
I need to use the grid to arrange the layout on my page.
below is my CSS and HTML code.
.layout{
display: grid;
grid-template-columns: 1fr 11fr;
grid-auto-rows: minmax(100vh, auto);
&_menu{
height: 90vh;
grid-row: 1/3;
#include for-size(phone-only){
display: flex;
margin-left: 0rem;
}
&-menu{
display: flex;
writing-mode: vertical-rl;
overflow: auto;
max-height: 75vh;
align-items: flex-start;
&-link{
padding: 2rem 0rem;
font-size: large;
#include for-size(phone-only){
padding: 0.2rem;
font-size: large;
}
a{
color: #DFF0E5;
text-decoration: none;
&:hover{
color: #696969;
}
}
}
#include for-size(phone-only){
writing-mode: horizontal-tb;
}
}
&-logo{
width: 5rem;
height: 5rem;
margin: 1rem 0rem;
#include for-size(phone-only){
margin: 0rem;
}
}
}
}
.cont{
border: greenyellow 1px solid;
}
<div class="layout">
<div class="layout_menu">
<img class="layout_menu-logo" src="assets/H_logo.png" alt="H Logo"/>
<div class="layout_menu-menu">
<div class="layout_menu-menu-link">page1</div>
<div class="layout_menu-menu-link">page2</div>
<div class="layout_menu-menu-link">page3</div>
<div class="layout_menu-menu-link">page4</div>
<div class="layout_menu-menu-link">page5</div>
</div>
</div>
<div class="layout_main cont">
</div>
</div>
I don't understand why is total screen height so much higher than 100vh even when I don't have content.
I want the page to end just with the green border. Can anyone help me understand the cause of this?
SS after scrolling halfway to the page
How I can make the image to be centered vertically on the left and the text on the right ?
.pricing1box {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
color: #444;
margin-top: 150px;
justify-content: center;
}
.pricing1box-div {
background-color: orange;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
<div class="pricing1box">
<div class="pricing1box-div">
<img src="http://placehold.it/350x150.png" style="float: left; display: inline-block; width: 100px; vertical-align: middle;">
<h6 style="color: black; padding: 10px;">Title</h6>
<p style="font: 10px blue;">Powered by me</p>
<br>
<p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
</div>
</div>
You can use grid properties on the image and text, as well. Just make the parent a grid container.
.pricing1box {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
color: #444;
}
.pricing1box-div {
display: grid; /* new; nested grid container */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
background-color: orange;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
.pricing1box-div img {
grid-column: 1;
grid-row: 1 / -1; /* from first line at start, to first line at end */
align-self: center; /* vertical centering */
width: 100px;
}
.pricing1box-div :not(img) {
grid-column: 2;
}
<div class="pricing1box">
<div class="pricing1box-div">
<img src="http://placehold.it/350x150.png">
<h6 style="color: black; padding: 10px;">Title</h6>
<p style="font: 10px blue;">Powered by me</p>
<p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
</div>
</div>
You can also mix flex & grid for readability
body {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
align-content: bottom;
}
div {
display:flex;
align-items: center; /* Vertical center of image & text */
background-color: orange;
}
p {
padding: 100px 10px; /* Demo stuff */
}
<div>
<img src="//placecage.com/100/100">
<p>text here</p>
</div>
Try this:
position: relative;
top: 50%;
transform: translateY(-50%);
or maybe you just need this: align="middle"
<img src="http://placehold.it/350x150.png" align="middle" style="float: left; display: inline-block; width: 100px; vertical-align: middle;">
In the example I have a block div containing div items, the div items are styled to be circles.
I would like to use flex to display them in two rows of three.
I have them displaying in two rows of three but the items are stretched out of shape.
How can I keep the items as circles and display them as two rows of three
body{
background: grey;
}
.block{
background: white;
display: flex;
height: 400px;
flex-flow: row wrap;
justify-content: space-around;
padding: 20px;
position: absolute;
right: 40px;
top: 80px;
width: 540px;
z-index: 1000;
}
.block__item{
background: red;
border-radius: 80px;
color: white;
flex-basis: 33%;
height: 80px;
text-align: center;
width: 80px;
}
<div class="block">
<div class="block__item">1</div>
<div class="block__item">2</div>
<div class="block__item">3</div>
<div class="block__item">4</div>
<div class="block__item">5</div>
<div class="block__item">6</div>
</div>
If you nest the circles inside the block--item class you can centre them inside without distorting their shape:
body {
background: grey;
}
.block {
background: white;
display: flex;
height: 400px;
flex-flow: row wrap;
justify-content: space-around;
padding: 20px;
position: absolute;
right: 40px;
top: 80px;
width: 540px;
z-index: 1000;
}
.block__item {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
}
.block__item_circle {
display: flex;
background: red;
justify-content: center;
align-items: center;
border-radius: 80px;
color: white;
height: 80px;
text-align: center;
width: 80px;
}
<div class="block">
<div class="block__item">
<div class="block__item_circle">1</div>
</div>
<div class="block__item">
<div class="block__item_circle">2</div>
</div>
<div class="block__item">
<div class="block__item_circle">3</div>
</div>
<div class="block__item">
<div class="block__item_circle">4</div>
</div>
<div class="block__item">
<div class="block__item_circle">5</div>
</div>
<div class="block__item">
<div class="block__item_circle">6</div>
</div>
</div>