minerva/Tests/LibWeb/Layout/input/grid/justify-content-fr.html at master

ErisCyan / minerva

Find file

Newer

Older

minerva / Tests / LibWeb / Layout / input / grid / justify-content-fr.html

minerva on 13 Jul 1 KB Initial commit

Raw Blame History

<!doctype html>
<style>
    body {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
        font-family: Arial, sans-serif;
    }
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        width: 300px;
        height: 30px;
        border: 2px solid #333;
    }
    .item {
        background-color: rebeccapurple;
    }
</style>
<div class="container" style="justify-content: start;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container" style="justify-content: end;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container" style="justify-content: center;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container" style="justify-content: stretch;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container" style="justify-content: space-between;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container" style="justify-content: space-around;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container" style="justify-content: space-evenly;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>