How to vertical center the tag names which are inside the div.
<div id="playerlist">
<div class="opponents_list"><b id="opponent_list_bold_name">bob</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">harri</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">harri2</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">kaleeem</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">nehaaa</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">nitiisha</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">rangi</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">tom</b>
</div>
</div>
.opponents_list {
width: 100vw;
height: 3em;
margin: 0.1em auto;
background: #666;
vertical-align:middle;
}
.opponent_list_bold_name {
vertical-align:middle;
}
The fiddle for the above code is at http://jsfiddle.net/cvsn8cu8/. Using the css propery vertical-align:middle; did not work
You have the same ID instead of a class. The use the same line height as height
.opponents_list {
width: 100vw;
height: 3em;
margin: 0.1em auto;
background: #666;
vertical-align: middle;
}
.opponent_list_bold_name {
line-height: 3em;
}
<div id="playerlist">
<div class="opponents_list"><b class="opponent_list_bold_name">bob</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nitiisha</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">rangi</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">tom</b>
</div>
</div>
Alternative Option
You can set the parent to display:table and the b to display:table-cell then vertically align
Jfiddle Demo
.opponents_list {
width: 100vw;
height: 3em;
margin: 0.1em auto;
background: #666;
display: table;
}
b.opponent_list_bold_name {
display:table-cell;
vertical-align:middle;
height: 100%;
}
<div id="playerlist">
<div class="opponents_list"><b id="opponent_list_bold_name">bob</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">harri</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">harri2</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">kaleeem</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">nehaaa</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">nitiisha</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">rangi</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">tom</b>
</div>
</div>
Set a line-height:
.opponents_list {
/* your code */
line-height: 3em;
}
As mention ID must be unique. Use class instead. Also you can use display: table:
#playerlist {
display: table;
width: 100%;
text-align: center;
}
.opponents_list {
width: 100vw;
height: 3em;
margin: 0.1em auto;
background: #666;
vertical-align: middle;
display: table-row;
}
.opponent_list_bold_name {
vertical-align: middle;
display: table-cell;
}
<div id="playerlist">
<div class="opponents_list"><b class="opponent_list_bold_name">bob</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nitiisha</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">rangi</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">tom</b>
</div>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
I am trying to order some divs, the idea is that I want to be able to offset them relative to each other to create asymmetrical grid.
All of it is working, until the moment content is added inside.
When a content is added into a div, that div is moved and positioned relative to the content inside it, so that the content is at the top left of the div, I am expecting the opposite behaviour, the div should not move, and the content should move relative to the div.
NOTE: I can not use an outside container to wrap all of them in it.
.column{
width: 49%;
height: 200px;
position: relative;
display: inline-flex;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="column red">
<p>
This breaks it
</p>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
If possible you could achieve the expected behavior by wraping the content inside another div and positioning it using position: absolute
.column{
width: 49%;
height: 200px;
position: relative;
display: inline-flex;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.column > div {
position: absolute
}
<div class="column red">
<div>
<p>
This breaks it
</p>
</div>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
Why don't you use the old pal float. I still use it over flex and grid often. much easier when simple layouts-
* {box-sizing:border-box;}
.column{
width: 50%;
height: 200px;
float:left;
position:relative;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="column red">
<p>
This breaks it
</p>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
Note: I add box-sizing rule becouse I hate that width:49%
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Why is a flex item limited to parent size?
(1 answer)
Closed 2 years ago.
I am creating a layout that contains three parts: sidebar (left), page (center), and summary (right). The left will remain fixed at the width of its inner content when the viewport width decreases, which is the expected behavior.
However, once I add overflow-y: auto to the left container, it loses respect for its inner content width, and completely shrinks along with the viewport width.
How does overflow-y: auto affect an item's flex-shrink behavior? How do I apply an overflow-y while allowing it to continue respecting its inner content width?
.root {
display: flex;
}
.root .sidebar {
border: 8px solid red;
flex: 2;
background: #f3f3f5;
height: 100vh;
display: flex;
justify-content: flex-end;
padding-top: 80px;
position: sticky;
top: 0;
/*
enable this and shrink the viewport
notice how the sidebar shrinks completely
and no longer respects the inner content's fixed width
*/
/*overflow-y: auto;*/
}
.root .page {
border: 8px solid green;
flex: 8;
max-width: 810px;
padding: 80px 80px 160px 80px;
}
#media only screen and (max-width: 1024px) {
.root .page {
padding-right: 40px;
padding-left: 40px;
}
}
.root .summary {
border: 8px solid blue;
flex: 2;
padding-top: 160px;
position: sticky;
top: 0;
align-self: flex-start;
}
.root .actions {
border: 8px solid orange;
position: fixed;
bottom: 0;
padding: 10px;
width: 100%;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.root .actions .inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-basis: 650px;
}
.root .stepper {
border: 4px solid #333;
flex-basis: 320px;
}
.root .stepper .step {
display: flex;
align-items: center;
margin: 0px 70px 40px 40px;
white-space: nowrap;
}
.root .stepper .step .circle {
background: #ffc2d4;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.root .form-stuff {
margin-bottom: 80px;
}
.root .card {
border: 4px solid #333;
align-self: flex-start;
border-radius: 8px;
padding: 10px;
max-width: 280px;
min-width: 180px;
white-space: nowrap;
}
.root .card .title {
margin: 20px 0;
}
.root .card .subtitle {
margin: 20px 0;
font-size: 14px;
}
.root .button {
background: #ffc2d4;
padding: 10px 20px;
}
* {
box-sizing: border-box;
}
<div class="root">
<div class="sidebar">
<div class="stepper">
<div class="step">
<div class="circle">
1
</div>
<div class="title">Step 1</div>
</div>
<div class="step">
<div class="circle">
2
</div>
<div class="title">Step 2</div>
</div>
<div class="step">
<div class="circle">
3
</div>
<div class="title">Step 3</div>
</div>
<div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div>
</div>
</div>
<div class="page">
<div class="form">
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
</div>
</div>
<div class="summary">
<div class="card">
<div class="title">Summary</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
</div>
</div>
<div class="actions">
<div class="inner">
<div class="button">Back</div>
<div class="button">Next</div>
</div>
</div>
</div>
I wanna create a hexagon be created with pure CSS3, as shown below.
As you see in the image, there is a b-g image on the background.
i have tried to create the hexagon but the text within the hexagon is not displaying properly( category1, category3 etc). its not transparent.
somehow am not able to get the actual image, my manager is asking for.
when I ran this code, am getting the hexagon with filled-in color.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>hexagon-tiles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style> li.hex-row {
margin-top: -10vw;
}
li.hex-row:nth-child(2n) .hexagon {
transform: translateX(50%) rotate(120deg);
}
ul#hexagonContainer {
margin: 0;
list-style: none;
padding: 0;
margin-top: 10vw;
}
.hexagon {
width: 18vw;
background: transparent;
height: 9vw;
display: inline-block;
transform: rotate(120deg);
overflow: hidden;
visibility: hidden;
margin-bottom: 7vw;
position: relative;
}
li.hex-row {
white-space: nowrap;
//filter: drop-shadow(0.5vw 2vw 0.5vw black);
}
.hexagon .hex-inner {
width: 100%;
height: 100%;
background: rebeccapurple;
transform: rotate(-60deg);
overflow: hidden;
position: relative;
}
.hexagon .hex-img {
width: 100%;
height: 100%;
transform: rotate(-60deg);
visibility: visible;
box-shadow: 1px 0px 0px 0px;
background-color: #6B8E23;
}
.hexagon .hex-img:after {
position: absolute;
width: 100%;
content: '';
z-index: 1;
height: 100%;
//background-image:
url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);
background-position: center center;
background-repeat: no-repeat;
}
.hex-img.hide {
visibility: hidden;
}
.text{
position: absolute;
//z-index: 1000;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<br/>
<ul id="hexagonContainer">
<!-- First row. -->
<li class="hex-row">
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img">
<div class="text">
<p>My Overall<br/> Score</p>
</div>
</div>
</div>
</div>
</li>
<!-- Second row. -->
<li class="hex-row">
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
</li>
<!-- Seventh row. -->
</ul> </div> </body> </html>
Here's a possible solution.
Instead of the current green background that you're setting to the hexagon, try a radial-gradient.
background: radial-gradient(circle, transparent 0%, #6B8E23 60%);
Edit: This is the solution to the anchor tag, I used flex so the tag will use the entire w & h of the container and center the text.
HTML:
<div class="text">
My overall score
</div>
CSS:
.text {
position: absolute;
z-index: 10;
width: 100%;
text-align: center;
height: 100%;
}
.text a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Hope this helps.
I want to create responsive square grids in ionic, just like shown in the image above.
But instead, I get something like showing in the image below. I searched the web I can't find any solution that does not involve using images which I am not trying to use.
You can do it in pure CSS :
* {
box-sizing: border-box;
}
.square-container {
padding: 8px;
}
.square {
width: calc(100% / 5);
float: left;
position: relative;
padding-bottom: calc(100% / 5);
}
.square .content {
width: calc(100% - 16px);
height: calc(100% - 16px);
margin: 8px;
padding: 16px;
position: absolute;
color: white;
background-color: #0095ff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
<div class="square-container">
<div class="square">
<div class="content">1</div>
</div>
<div class="square">
<div class="content">2</div>
</div>
<div class="square">
<div class="content">3</div>
</div>
<div class="square">
<div class="content">4</div>
</div>
<div class="square">
<div class="content">5</div>
</div>
<div class="square">
<div class="content">6</div>
</div>
<div class="square">
<div class="content">7</div>
</div>
<div class="square">
<div class="content">8</div>
</div>
<div class="square">
<div class="content">9</div>
</div>
<div class="square">
<div class="content">10</div>
</div>
<div class="square">
<div class="content">11</div>
</div>
<div class="square">
<div class="content">12</div>
</div>
</div>
I have several square items inside a scrollable area. Each item increases in scale by 10% when rolled over. When the group of items is either significantly taller or shorter than the scroll area, everything works fine.
The problem occurs when the height of the items is only slightly shorter than the height of the scrollable area. This only occurs in Chrome. What I think is happening is that when an item increases in size by 10%, the entire div containing the items also increases to larger than the height of the scroll area, at which point the scrollbar flashes on and off.
Gif of scrollbar flashing on and off
Is there anything I can do to prevent this from happening?
Here's a CodePen example: http://codepen.io/anon/pen/VPzoPK?editors=1100#0
And the associated code:
CSS
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: auto;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
HTML
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
Thanks for your help!
Edit: Mentioned that this is a chrome issue
To disable scrolling:
div {
overflow-y: hidden;
}
To force scrolling:
div {
overflow-y: scroll;
}
Fixed css:
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
overflow-y: auto;
width: 300px;
background-color: white;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
For this to work, add additional 2 boxes to your div ;)
<div class="grid__col">
<div class="square_image"></div>
</div>
I think you have two differents approaches to take:
1- Hide your scroll using overflow-y: hidden
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: hidden;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
2- Force the scroll to appear always using overflow: scroll
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: scroll;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
But you should keep a relation between the effect and the size, still when you are not seeing the undesired effect it is still happening.
There is a problem related to the design and the way it looks like in this case.
I Hope to help you.
Either give the .scrollable div more width, to account for the scrollbar appearing:
.scrollable {
width: 330px;
}
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 330px; /* changed from '300px' */
background-color: white;
overflow-y: auto;
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>
Or simply force the scrollbar to be always visible:
.scrollable {
overflow-y: scroll;
}
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.scrollable {
width: 300px;
background-color: white;
overflow-y: scroll; /* changed from 'auto' */
max-height: 495px;
}
.grid__col {
display: inline-block;
width: 25%;
margin: 10px;
background-color: blue;
}
.square_image {
background-color: red;
width: 100%;
padding-bottom: 100%;
border: 2px solid black;
}
.square_image:hover {
transform: scale(1.1);
}
<div class="scrollable">
<div class="grid">
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
<div class="grid__col">
<div class="square_image"></div>
</div>
</div>
</div>