<style scoped>

.fullframe, .month, .header {
    border: solid; border-width: 1px;
}

.fullframe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-auto-columns: 1fr; */
    grid-template-rows: repeat(5, 1fr);
    min-width: 1.2rem;
    gap: .6rem;
}

.month {
    height: fit-content;
}

.header {
    grid-column: 1 / 7;
    grid-row: 1 / 2;
}

.days {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.leapweek {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.m1 {

}

.h1{

}

.m2 {

}

.h2{

}


.m3 {

}

.h3{

}

.m4 {

}

.h4{

}

.m5 {

}

.h5{

}

.m6 {

}

.h6{

}

.m7 {

}

.h7{

}

.m8 {

}

.h8{

}

.m9 {

}

.h9{

}

.m10 {

}

.h10{

}

.m11 {

}

.h11{

}

.m12 {

}

.h12{

}

.m13 {
    grid-column: 3;

}

.intercalaryheader {
    grid-column: 2;


}

.intercalarytext {
    margin-left: auto;
    width: 0;
    min-width: fit-content;
}

</style>

<template>


        <div class="fullframe">
            <div class="month m1">
                <div class="header h1">
                    First
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m2">
                <div class="header h2">
                    Second
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m3"> 
                <div class="header h3">
                    Third
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m4">
                <div class="header h4">
                    Fourth
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m5">
                <div class="header h5">
                    Fifth
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m6">
                <div class="header h6">
                    Sixth
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m7">
                <div class="header h7">
                    Seventh
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m8">
                <div class="header h8">
                    Eighth
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m9">
                <div class="header h9">
                    Ninth
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m10">
                <div class="header h10">
                    Tenth
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m11">
                <div class="header h11">
                    Eleventh
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="month m12">
                <div class="header h12">
                    Twelfth
                </div>
                <div class="days">
                    yah
                </div>
            </div>
            <div class="intercalaryheader">
                <div class="intercalarytext">Intercalary Week</div>
            </div>
            <div class="month m13">
                <div class="leapweek">
                    yuh
                </div>
            </div>
        </div>

</template>