Is there a way to display divs in a staggered vertical arrangement like this image?
So far I have used Flexbox to get close but can't stagger the rows because I don't want to pre-determine how many circles are in each row, I want the user's browser width to control how many circles are per row (hence no classes or childs on the circle divs).
As the user's browser gets narrower, I want the circles to respond so that in a mobile size they would become 1 long single column.
Here is a Fiddle to show the code so far. I'd be open to JQuery if needed.
Thank you for any help.
* {margin: 0; padding: 0;}
body {font-family: Helvetica Neue; font-style: normal; text-align: center; color: #111;}
section {width: 100%; display: flex; flex-direction: column;}
.memoji_list {display: flex; flex-wrap: wrap; flex-direction: row;}
.memoji {background: green; border-radius:999px; width:100px; height:100px; margin: 0 auto;}
<body>
<section>
<div class="memoji_list">
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
</section>
</body>
The trick I made for hexagon shapes can be applied here:
.main {
display: flex;
--s: 100px; /* the circle size */
--m: 8px; /* control the distance between circles */
--vc: 10px; /* control the distance between rows */
--f: calc(2*var(--s) + 4*var(--m) - 2*var(--vc) - 2px);
}
.container {
font-size: 0;
}
.container div {
width: var(--s);
margin: var(--m);
height: var(--s);
display: inline-block;
font-size: initial;
border-radius:50%;
background:red;
margin-bottom: calc(var(--m) - var(--vc));
}
.container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 120%;
shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),#000 0 var(--f));
}
<div class="main">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
.row{
display:flex;
justify-content:space-evenly;
flex-direction:row;
}
.memoji{
width:100px;
height:100px;
background-color:green;
border-radius:50%;
}
<div class='row'>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
<div class='row'>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
<div class='row'>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
This is not responsive (and you have to enlarge the snippet window to "full page" size in order to get the amount of elements into the rows that you have in your image), but it's a starting point, using a max-width and margin: 0 auto for the container and a margin-left for .memoji:nth-child(11n - 4)
You could then use media queries to have different amounts of circles depending on the window width, with similar rules.
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica Neue;
font-style: normal;
text-align: center;
color: #111;
}
section {
width: 100%;
max-width: 720px;
margin: 0 auto;
}
.memoji_list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.memoji {
background: green;
border-radius: 999px;
width: 100px;
height: 100px;
margin: 0 auto;
margin: 10px;
}
.memoji:nth-child(11n - 4) {
margin-left: 70px;
}
<body>
<section>
<div class="memoji_list">
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
<div class="memoji"> </div>
</div>
</section>
</body>
Related
I'm trying to make it such that I have two half-width wrappers side by side. Currently the wrappers do take half the space but don't appear side to side. The display:flex seems to be taking the whole width and leaving the unused space on the side as margin.
.wrapper {
display: flex;
flex-direction: column;
width: 40%;
border: 1px solid black;
}
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
I also tried adding another div outside wrapper with width 50% but it didn't help. Any ideas?
Instead of display: flex, use display: inline-flex.
The first is a block-level element which, by default, takes the full width of the parent.
The second is an inline-level element, which can co-exist with other elements on the same line.
.wrapper {
display: inline-flex;
flex-direction: column;
width: 40%;
border: 1px solid black;
}
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
Alternatively, set the parent element to display: flex which, by default, forces the children to exist in the same row.
Add this to your code: body { display: flex }.
.wrapper {
display: flex;
flex-direction: column;
width: 40%;
border: 1px solid black;
}
body {
display: flex;
}
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
I believe display: flex is similar to display: block if it's a top level element. The difference being; the children of the flex container will be able to utilize the flex behavior. What you need to do is something like this:
body {
margin: 0;
}
.parent {
display: flex;
height: 100vh;
background: #eee;
}
.child {
display: flex;
flex-direction: column;
flex: 1;
border: 1px dashed #ccc;
}
<div class='parent'>
<div class='child column'>child 1</div>
<div class='child column'>child 2</div>
</div>
Wrap the wrappers with div and then display: flex.
.main-wrapper {
display: flex;
}
.wrapper {
display: flex;
flex-direction: column;
width: 50%;
border: 1px solid black;
}
<div class="main-wrapper">
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="title">Test Title</div>
<div class="info">
<div class="column">
<b>1</b>
<span>One</span>
</div>
<div class="column">
<b>2</b>
<span>Two</span>
</div>
</div>
</div>
</div>
is there a way to achieve, that rows in columns side by side are aligned to baseline?
In the example, only "A" is aligned correctly. What I want is to make align baseline also "B" and "C" with the same html structure.
https://jsfiddle.net/hxzuar7f/
I know that something like this will work
<div class="row">
<div class="column">A</div>
<div class="column">A</div>
<div class="column">A</div>
</div>
<div class="row">
<div class="column">B</div>
<div class="column">B</div>
<div class="column">B</div>
</div>
But I want to work this
<div class="container">
<div class="element">
<div class="row">
<h1>A</h1>
</div>
<div class="row">
<div>B</div>
</div>
<div class="row">
<div>C</div>
</div>
</div>
<div class="element">
<div class="row">
<div>A</div>
</div>
<div class="row">
<div>B</div>
</div>
</div>
</div>
(green lines are correct, red lines are wrong)
this is what I want to achieve with CSS:
this is what I got now:
Solution 1 : column → row
That's because your element are in column instead of inline. The align-items: baseline attribut works when elements are horizontaly align. So the best way to acheive what's on your image is with flex-direction: row like this:
h1, h3, div {
display: flex;
align-items: baseline;
flex-direction: row;
box-sizing: border-box;
}
.element {
display: flex;
padding: 20px;
width: 200px;
justify-content: space-between;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
<div class="container">
<div class="element">
<div class="row">
<h1>A</h1>
</div>
<div class="row">
<div>B</div>
</div>
<div class="row">
<div>C</div>
</div>
</div>
<div class="element">
<div class="row">
<div>A</div>
</div>
<div class="row">
<div>B</div>
</div>
</div>
<div class="element">
<div class="row">
<div>A</div>
</div>
<div class="row">
<h3>B</h3>
</div>
<div class="row">
<div>C</div>
</div>
</div>
</div>
Solution 2 : add a margin-bottom
If you really want to keep element in column, you need to add a margin-bottom to each row element. But remove some padding of h1and h2. Like this:
h1, h3, div {
display: flex;
align-items: baseline;
flex-direction: row;
box-sizing: border-box;
margin:0;
}
.element {
display: flex;
padding: 20px;
width: 200px;
flex-direction: column;
}
.container {
flex-direction: row;
}
.row {
margin-bottom: 40px;
display: flex;
}
<div class="container">
<div class="element">
<div class="row">
<h1>A</h1>
</div>
<div class="row">
<div>B</div>
</div>
<div class="row">
<div>C</div>
</div>
</div>
<div class="element">
<div class="row">
<div>A</div>
</div>
<div class="row">
<div>B</div>
</div>
</div>
<div class="element">
<div class="row">
<div>A</div>
</div>
<div class="row">
<h3>B</h3>
</div>
<div class="row">
<div>C</div>
</div>
</div>
</div>
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
I have a web page in which .blocks is 1000px height and <body> is 2000px i am using overflow:hidden to .blocks which is working fine but blank body is showing after it i want webpage height should be 1000px only after that it will hide content.
Here is my code:
HTML
<div class="blocks">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
CSS
body{
height: 2000px;
}
.blocks{
height:1000px;
overflow:hidden;
}
.block{
background: #000;
height: 100px;
width: 100%;
margin-bottom: 10px;
}
Here is the fiddle with problem : https://jsfiddle.net/0b6g6886/2/
try this:
body{
height: auto;
}
I want to have a responsive 9x9 div grid with no scrollbar. The div grid should resize according to the visible browser window. I've combined "How to maintain the aspect ratio of a div using only CSS" with "Grid of responsive squares":
html
<div class="stretchy-wrapper">
<div class="inner">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
98%
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
</div>
</div>
css
#import url(http://fonts.googleapis.com/css?family=Lato:400,900); /* <-- Just for the demo, Yes I like pretty fonts... */
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
background-color:#1E1E1E;
overflow:hidden;
}
.content {
position:absolute;
height:90%; /* = 100% - 2*5% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 5%;
}
.table{
display:table;
width:100%;
height:100%;
}
body {
font-size:20px;
font-family: 'Lato',verdana, sans-serif;
color: #fff;
text-align:center;
background:#ECECEC;
}
.numbers{
font-weight:900;
font-size:100px;
}
div.stretchy-wrapper {
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
background: lightgrey;
}
div.stretchy-wrapper > .inner {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
color: white;
font-size: 24px;
text-align: center;
}
However the divs still get expanded to maximum width which causes scroll bars: Fiddle.
What is the css trick that the divs are only expanded to the maximum visible width or height? So I don't get scroll bars?
Solved it with Flexbox and vmin
css
.container {
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: space-around;
height: 93vmin;
width: 93vmin;
background: lightgrey;
}
.cell {
height: 30vmin;
width: 30vmin;
background-color:#1E1E1E;
}
html
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
Full Screen Fiddle
Fiddle
Recommended read about flexbox