How to make simple grid gallery in css

Issue #642

Specify container with flex-wrap and justify-content, and item with float: left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
div.cards {
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
margin-top: 10%;
}

div.card {
overflow: hidden;
float: left;
width: 220px;
color: #232330;
text-align: center;
border-radius: 10px;
border-color: silver;
box-shadow: 1px 8px 8px rgba(10, 10, 10, 0.2);
font-family: 'Open Sans', sans-serif;
margin: 16px;
transition: all .2s ease-in-out;
}

div.card:hover {
transform: scale(1.2);
}

Comments