I'm struggling to make equal flex-box flex-direction column rows. Most of the code is added below. I am trying to deal with it through a long time already and I certainly would appreciate a help.
My code:
.table__cell {
flex: 1;
padding: 10px 20px;
border: 1px solid black;
margin: 3px;
}
.table--params {
width: auto;
flex: 1;
display: flex;
}
.table--params>.table__cell {
padding: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.table--params>.table__cell .table__row {
flex: 1;
}
<div class="table--params">
<div class="table__cell">
<div class="table__row">
<div class="table__cell">
Jan Kowalski
</div>
</div>
<div class="table__row">
<div class="table__cell">
John Kowalsky
</div>
</div>
<div class="table__row">
<div class="table__cell"></div>
</div>
</div>
<div class="table__cell">
<div class="table__row">
<div class="table__cell">
123123123
</div>
</div>
<div class="table__row">
<div class="table__cell">
123123123
</div>
</div>
<div class="table__row">
<div class="table__cell">
123123123
</div>
</div>
</div>
<div class="table__cell">
<div class="table__row">
<div class="table__cell"></div>
</div>
<div class="table__row">
<div class="table__cell"></div>
</div>
<div class="table__row">
<div class="table__cell">
email#example.com
</div>
</div>
</div>
<div class="table__cell">
<div class="table__row">
<div class="table__cell">
Tester
</div>
</div>
<div class="table__row">
<div class="table__cell"></div>
</div>
<div class="table__row">
<div class="table__cell">
Grafik
</div>
</div>
</div>
</div>
The problem is visualized in jsfiddle:
https://jsfiddle.net/xp7cs5ag/
The question is - how to make equal height of every row in each column?
You could achieve this with display: grid (instead of flex) for the outer .table__cell. With grid-template-rows: 1fr 1fr 1fr; you define that each row should have an equal height. You could also define fixed values like px.
Working example:
.table__cell {
flex: 1;
padding: 10px 20px;
border: 1px solid black;
margin: 3px;
}
.table--params {
width: auto;
flex: 1;
display: flex;
}
.table--params>.table__cell {
padding: 0;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
.table--params>.table__cell .table__row {
flex: 1;
}
<div class="table--params">
<div class="table__cell">
<div class="table__row">
<div class="table__cell">
Mariusz Bocz
</div>
</div>
<div class="table__row">
<div class="table__cell">
Feliks Michalski
</div>
</div>
<div class="table__row">
<div class="table__cell"></div>
</div>
</div>
<div class="table__cell">
<div class="table__row">
<div class="table__cell">
123123123
</div>
</div>
<div class="table__row">
<div class="table__cell">
123123123
</div>
</div>
<div class="table__row">
<div class="table__cell">
123123123
</div>
</div>
</div>
<div class="table__cell">
<div class="table__row">
<div class="table__cell"></div>
</div>
<div class="table__row">
<div class="table__cell"></div>
</div>
<div class="table__row">
<div class="table__cell">
programista#tech-studio.pl
</div>
</div>
</div>
<div class="table__cell">
<div class="table__row">
<div class="table__cell">
Programista
</div>
</div>
<div class="table__row">
<div class="table__cell"></div>
</div>
<div class="table__row">
<div class="table__cell">
Grafik
</div>
</div>
</div>
</div>
If you want the grid-items to be centered you could use align-items: center.
Working example:
.table__cell {
flex: 1;
padding: 10px 20px;
border: 1px solid black;
margin: 3px;
}
.table--params {
width: auto;
flex: 1;
display: flex;
}
.table--params>.table__cell {
padding: 0;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
align-items: center;
}
.table--params>.table__cell .table__row {
flex: 1;
}
<div class="table--params">
<div class="table__cell">
<div class="table__row">
<div class="table__cell">
Mariusz Bocz
</div>
</div>
<div class="table__row">
<div class="table__cell">
Feliks Michalski
</div>
</div>
<div class="table__row">
<div class="table__cell"></div>
</div>
</div>
<div class="table__cell">
<div class="table__row">
<div class="table__cell">
123123123
</div>
</div>
<div class="table__row">
<div class="table__cell">
123123123
</div>
</div>
<div class="table__row">
<div class="table__cell">
123123123
</div>
</div>
</div>
<div class="table__cell">
<div class="table__row">
<div class="table__cell"></div>
</div>
<div class="table__row">
<div class="table__cell"></div>
</div>
<div class="table__row">
<div class="table__cell">
programista#tech-studio.pl
</div>
</div>
</div>
<div class="table__cell">
<div class="table__row">
<div class="table__cell">
Programista
</div>
</div>
<div class="table__row">
<div class="table__cell"></div>
</div>
<div class="table__row">
<div class="table__cell">
Grafik
</div>
</div>
</div>
</div>
I have the same problem once and I got this code and it worked for me
The HTML :-
<div class="cont">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
The CSS :-
.cont {
display: table;
width: 100%;
}
.col {
display: table-cell;
}
Related
I want to have the part under "foo" totally scrollable, yet I haven't been able to achieve it using flexbox. I've tried it with min-height, but without any success.
https://jsfiddle.net/szd5tvfc/2/
$('.ui.dropdown')
.dropdown();
.ui.vertical.menu {
display: flex;
flex-direction: column;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ui vertical menu">
<div class="item">
<h3 class="ui header">Select foos</h3>
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search foo..." />
</div>
</div>
<div class="item">
Selected foos
<div class="scrolling menu">
<div class="item">
<div class="content">foo name</div>
</div>
</div>
</div>
<div class="overflowing item">
foos
<div class="scrolling menu">
<div class="item">
<div class="content">Foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
</div>
</div>
</div>
For the overflow property to work, there needs to be a defined height somewhere along the line. Otherwise, how does the property know where to overflow? It will just keep extending the box.
Try this.
.ul.vertical.menu { height: 100vh; }
.overflowing.item { flex-basis: 1px; flex-grow: 1; }
.ui.vertical.menu {
display: flex;
flex-direction: column;
height: 100vh;
}
.ui.vertical.menu>.overflowing.item {
flex-basis: 1px;
flex-grow: 1;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
<div class="ui vertical menu">
<div class="item">
<h3 class="ui header">Select foos</h3>
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="Search foo..." />
</div>
</div>
<div class="item">
Selected foos
<div class="scrolling menu">
<div class="item">
<div class="content">foo name</div>
</div>
</div>
</div>
<div class="overflowing item">
foos
<div class="scrolling menu">
<div class="item">
<div class="content">Foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
<div class="item">
<div class="content">foo</div>
</div>
</div>
</div>
</div>
jsFiddle demo
Add this CSS to your code:
.ui.vertical.menu {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: stretch;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
flex-shrink: 1;
flex-grow: 1;
}
It uses justifycontent: strech; and the flex-shrink/flex-grow properties.
Here is the link to a fully functional fiddle: jsfiddle.
Note that the flex parent's height can be adjusted freely and it won't cause any sort of extra scrollbars or anything.
I'm not sure if I understood what you want but to get scroll you need to set max-height instead min-height.
.ui.vertical.menu {
display: flex;
flex-direction: column;
}
.ui.vertical.menu>.overflowing.item,
.ui.vertical.menu>.overflowing.item>.menu {
display: flex;
flex-direction: column;
max-height: 200px;
overflow: auto;
}
Check the changes below
https://jsfiddle.net/r4bxu5ep/
How do place these div's next to each other in a 3x2 row instead of rows of 1.
Should I make the event-box and event-info as one div instead of two separate div's? I've tried to combine them as one div and given the <p> the event-info class but that didn't work out. I've also tried different sizes for both of the div's and the container to maybe push them next to each other, but that also didn't work. See my code below.
.event-box{
height: 5rem;
width: 30rem;
float: left;
clear: both;
padding: 0;
margin-top: 1rem;
text-align: center;
background: url(/assets/images/placeholderimg4.jpg);}
.event-info{
height: 5rem;
width: 30rem;
float: left;
clear: both;
padding: 0;
margin: 0;
text-align: center;
background-color: rgba(77, 75, 75, 0.1);}
.container{
height: 100%;
width: 64rem;
word-wrap: break-word;
overflow-y: hidden;
padding: 0;}
<div class="container">
<div class="event-box">
<h3 class="event-text">Event 1</h3>
</div>
<div class="event-info">
<p>1</p>
</div>
<div class="event-box">
<h3 class="event-text">Event 2</h3>
</div>
<div class="event-info">
<p>2</p>
</div>
<div class="event-box">
<h3 class="event-text">Event 3</h3>
</div>
<div class="event-info">
<p>3</p>
</div>
<div class="event-box">
<h3 class="event-text">Event 4</h3>
</div>
<div class="event-info">
<p>4</p>
</div>
<div class="event-box">
<h3 class="event-text">Event 5</h3>
</div>
<div class="event-info">
<p>5</p>
</div>
<div class="event-box">
<h3 class="event-text">Event 6</h3>
</div>
<div class="event-info">
<p>6</p>
</div>
</div>
So I used CSS grid for this.
I did combine your event-info and event-box div's together to make them one object in the grid.
.event-box {
height: 5rem;
width: 30rem;
float: left;
clear: both;
padding: 0;
margin-top: 1rem;
text-align: center;
background: url(/assets/images/placeholderimg4.jpg);
}
.event-info {
height: 5rem;
width: 30rem;
float: left;
clear: both;
padding: 0;
margin: 0;
text-align: center;
background-color: rgba(77, 75, 75, 0.1);
}
.container {
height: 100%;
width: 64rem;
word-wrap: break-word;
padding: 0;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-gap: 2rem;
}
<div class="container">
<div class="event-box">
<h3 class="event-text">Event 1</h3>
<div class="event-info">
<p>1</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 2</h3>
<div class="event-info">
<p>2</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 3</h3>
<div class="event-info">
<p>3</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 4</h3>
<div class="event-info">
<p>4</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 5</h3>
<div class="event-info">
<p>5</p>
</div>
</div>
<div class="event-box">
<h3 class="event-text">Event 6</h3>
<div class="event-info">
<p>6</p>
</div>
</div>
</div>
So in the container class I added a display of grid (to use grid functions) and then I added grid-template-columns (which allows you to specify how many columns you want to include) and a grid-template-rows to do the same thing for the rows. I then added a grid-gap to separate the div tags a bit but this value can be played with depending on the desired gap.
You can add a wrap div, like 'event' for it :
<div class="container">
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 1</h3>
</div>
<div class="event-info">
<p>1</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 2</h3>
</div>
<div class="event-info">
<p>2</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 3</h3>
</div>
<div class="event-info">
<p>3</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 4</h3>
</div>
<div class="event-info">
<p>4</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 5</h3>
</div>
<div class="event-info">
<p>5</p>
</div>
</div>
<div class='event'>
<div class="event-box">
<h3 class="event-text">Event 6</h3>
</div>
<div class="event-info">
<p>6</p>
</div>
</div>
</div>
And a little css addition:
.event{
display:inline-block;
width:49%;
}
Try it - https://jsfiddle.net/5vz3Lhwc/
You can make use of the power of Flexbox! Wrap each row in a div with class row and each column in a div with class col. Example:
<div class="container">
<div class="row">
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 1</h3>
</div>
<div class="event-info">
<p>1</p>
</div>
</div>
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 2</h3>
</div>
<div class="event-info">
<p>2</p>
</div>
</div>
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 3</h3>
</div>
<div class="event-info">
<p>3</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 4</h3>
</div>
<div class="event-info">
<p>4</p>
</div>
</div>
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 5</h3>
</div>
<div class="event-info">
<p>5</p>
</div>
</div>
<div class="col">
<div class="event-box">
<h3 class="event-text">Event 6</h3>
</div>
<div class="event-info">
<p>6</p>
</div>
</div>
</div>
</div>
The CSS for the added elements:
.row {
width: 100%;
display: flex;
}
.col {
width: 33%;
flex: 1;
}
Edit: CSS Grid might be an even easier solution.
I'm trying to make a table with flexbox but, I have some problems getting it to behave like a table. I can not get it to take only the space required, but still be aligned vertically. As you can see if you run the attached code all column's are taking up the same space. Any suggestions for how I can fix this?
.table {
display: flex;
flex-flow: column;
border-top: 1px solid #000;
border-left: 1px solid #000;
max-width: 100%;
}
.table__row {
display: flex;
max-width: 100%;
border-bottom: 1px solid #000;
}
.table__row:nth-of-type(even) {
background-color: #fff;
}
.table__row:nth-of-type(odd) {
background-color: #efefef;
}
.table__column {
display: flex;
text-align: left;
flex-grow: 1;
flex-basis: 0;
padding: 0 1rem;
border-right: 1px solid #000;
word-break: break-word;
}
.table__header {
background-color: blue;
color: #fff;
}
<div class="table">
<div class="table__row">
<div class="table__column table__header">
ID
</div>
<div class="table__column table__header">
TAG
</div>
<div class="table__column table__header">
USED
</div>
<div class="table__column table__header">
USER
</div>
<div class="table__column table__header">
IP
</div>
<div class="table__column table__header">
DATE
</div>
</div>
<div class="table__row">
<div class="table__column">
1
</div>
<div class="table__column">
newpage
</div>
<div class="table__column">
0
</div>
<div class="table__column">
1
</div>
<div class="table__column">
0
</div>
<div class="table__column">
05.02.2018
</div>
</div>
<div class="table__row">
<div class="table__column">
2
</div>
<div class="table__column">
news
</div>
<div class="table__column">
0
</div>
<div class="table__column">
1
</div>
<div class="table__column">
0
</div>
<div class="table__column">
05.02.2018
</div>
</div>
<div class="table__row">
<div class="table__column">
3
</div>
<div class="table__column">
rajohan
</div>
<div class="table__column">
0
</div>
<div class="table__column">
1
</div>
<div class="table__column">
0
</div>
<div class="table__column">
05.02.2018
</div>
</div>
<div class="table__row">
<div class="table__column">
4
</div>
<div class="table__column">
website
</div>
<div class="table__column">
0
</div>
<div class="table__column">
1
</div>
<div class="table__column">
0
</div>
<div class="table__column">
05.02.2018
</div>
</div>
<div class="table__row">
<div class="table__column">
5
</div>
<div class="table__column">
testtesttesttesttest test test
</div>
<div class="table__column">
0
</div>
<div class="table__column">
1
</div>
<div class="table__column">
0
</div>
<div class="table__column">
05.02.2018
</div>
</div>
</div>
I have div to look like table, this is my code:
.cell {
border: 1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
Now all the the columns are in different width, and I don't know why. I want that div get different width but synchronize.
using display:table like this
.tableLike{width:100%;display:table;}
.cell{border:1px solid red;display:table-cell;}
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 15%;}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
Add the correct display styles:
.cell {
border: 1px solid red;
display: table-cell;
}
.tableLike {
padding-bottom: 30px;
display: table;
}
.rowLike {
display: table-row;
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 33%;}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
I will do like this.
You can try, but it may not be the best answer.
.cell {
border-right:1px solid red;
border-bottom:1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.rowLike:nth-child(1) .cell:nth-child(2),
.rowLike:nth-child(1) .cell:nth-child(3){
border-top:1px solid red;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.icon-close{
border-left:1px solid red;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
I am looking for ways to add in a 3x3 grid of circle icons to my website. Each icon needs to contain a caption text (including sub-caption text) and be spaced evenly apart. The center icons need to be in the center of the webpage.
I unfortunately have been stuck for the last couple of hours, and I have no idea on how to achieve this. I would appreciate any help.
Here is a mostly flexbox grid with square cells and centered content that will evenly space the circle/text.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 90%;
margin: auto;
background: #eee;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
background: #ccc;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto 1em;
}
.inner {
text-align: center;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
</div>