<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.grid {
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    width: 200px;
}

.gridItem {
    width: 20px;
    height: 40px;
}

.marginTop {
    margin-top: 20px;
}

.marginBottom {
    margin-bottom: 20px;
}

.testContainer {
    position: relative;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<div>This test checks that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins.</div>

<div class="testContainer">
    <div class="grid contentStart">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid contentStart">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid contentStart horizontalBT">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem firstRowSecondColumn"></div>
        <div class="gridItem marginBottom secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

<div class="testContainer">
    <div class="grid contentStart horizontalBT">
        <div class="gridItem marginTop firstRowFirstColumn"></div>
        <div class="gridItem marginBottom firstRowSecondColumn"></div>
        <div class="gridItem secondRowFirstColumn"></div>
        <div class="gridItem secondRowSecondColumn"></div>
    </div>
</div>

</body>
</html>
