<div class="notice">
👋 Hey, looks like your browser does not support <code>margin-inline-end</code>. Try viewing this demo in Firefox or Chrome.
</div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box box--margin"><code>margin</code></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="controls">
<button id-"toggle">Toggle Direction</button>
</div>:root {
--margin: 30px;
}
body {
padding: 3rem;
}
.boxes {
display: grid;
grid-auto-flow: dense;
grid-gap: 1em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 100%;
}
.box {
align-items: center;
border: 1px solid #ccc;
display: flex;
height: 100px;
justify-content: center;
text-align: center;
}
.box--margin {
margin-inline-end: var(--margin);
position: relative;
}
.box--vertical {
writing-mode: vertical-lr;
}
button {
background-image: linear-gradient(to top left, #ff8a00, #e52e71);
border: none;
border-radius: 8px;
color: #fff;
cursor: pointer;
font-weight: 800;
margin-top: 1rem;
padding: 1rem 1.5rem;
}
button:hover {
background-image: linear-gradient(to top left, #ff8a00 30%, #e52e71);
transform: translateY(1px);
}
button:active {
transform: translateY(2px);
}
.notice {
background: #fff9c4;
border-radius: 8px;
color: #827717;
margin-bottom: 1.5rem;
padding: 1rem;
text-align: center;
width: clamp(300px, 90%, 800px);
}
@supports (margin-inline-end: 0) {
.notice {
display: none;
}
}
$("div").click(function () {
var box = $(".box--margin");
box.toggleClass("box--vertical");
});
External CSS
This Pen doesn't use any external CSS resources.