JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<section class="position-aligned">
    <h1 class="title">Alligned with relative/absolute positioning</h1>
    <div class="grid">
        <div class="grid-cell">
            <div class="box pos-top-left">
                <div class="box-content"></div>
            </div>
        </div>
        <div class="grid-cell">
            <div class="box pos-top-center">
                <div class="box-content"></div>
            </div>
        </div>
        <div class="grid-cell">
            <div class="box pos-top-right">
                <div class="box-content"></div>
            </div>
        </div>
        <div class="grid-cell">
            <div class="box pos-center-left">
                <div class="box-content"></div>
            </div>
        </div>
        <div class="grid-cell">
            <div class="box pos-center-center">
                <div class="box-content"></div>
            </div>
        </div>
        <div class="grid-cell">
            <div class="box pos-center-right">
                <div class="box-content"></div>
            </div>
        </div>
        <div class="grid-cell">
            <div class="box pos-bottom-left">
                <div class="box-content"></div>
            </div>
        </div>
        <div class="grid-cell">
            <div class="box pos-bottom-center">
                <div class="box-content"></div>
            </div>
        </div>
        <div class="grid-cell">
            <div class="box pos-bottom-right">
                <div class="box-content"></div>
            </div>
        </div>
    </div>
</section>

<section class="flex-aligned">
    <h1 class="title">Alligned with flex</h1>
    <div class="grid">
        <div class="grid-cell">
            <div class="box pos-top-left">
                <div class="box-content"></div>
            </div>
        </div>
        <div class="grid-cell">
            <div class="box pos-top-center">
                <div class="box-content"></div>
            </div>
    ...

SCSS

// mixins
$vertical: (top, center, bottom);
$horizontal: (left, center, right);
@mixin pa($v, $h) {
    @if $h==left {
        left: 0;
    }
    @else if $h==center {
        left: 50%;
    }
    @else if $h==right {
        right: 0;
    }
    @if $v==top {
        top: 0;
    }
    @else if $v==center {
        top: 50%;
    }
    @else if $v==bottom {
        bottom: 0;
    }
    @if $h==center {
        transform: translateX(-50%);
    }
    @if $v==center {
        transform: translateY(-50%);
    }
    @if $v==center and $h==center {
        transform: translate(-50%, -50%);
    }
}

@mixin fa($v, $h) {
    @if $h==left {
        justify-content: flex-start;
    }
    @else if $h==center {
        justify-content: center;
    }
    @else if $h==right {
        justify-content: flex-end;
    }
    @if $v==top {
        align-items: flex-start;
    }
    @else if $v==center {
        align-items: center;
    }
    @else if $v==bottom {
        align-items: flex-end;
    }
}

$alignments: (position, flex);
@each $a in $alignments {
    .#{$a}-aligned {
        @if $a==position {
            .box-content {
                position: absolute;
            }
            @each $i in $vertical {
                @each $j in $horizontal {
                    .pos-#{$i}-#{$j} .box-content {
                        @include pa($i, $j);
                        
                    }
                }
            }
        }
        @else if $a==flex {
            .box {
                display: flex;
            }
            @each $i in $vertical {
                @each $j in $horizontal {
                    .pos-#{$i}-#{$j} {
                        @include fa($i, $j);
                    }
                }
            }
        }
    }
}

// style
body {
    min-height: 100vh;
    background: #f8f8f8;
    padding: 5%;
}

section {
    background: #fff;
    padding: 30px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
   ...