<!DOCTYPE html>

<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<style>
.frGrid {
    grid: 1fr / 1fr;
    font: 50px/1 Ahem;
    border: 50px solid magenta;
    width: 300px;
}

.item {
    border: 50px solid rgba(0, 255, 250, 0.5);
}

.borderMargin {
    border: 20px solid blue;
    margin: 30px;
}

.frRowsGrid {
    grid-auto-columns: 100px;
    grid-auto-rows: minmax(0, 1fr);
}

.frColsGrid {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-rows: 100px;
}

span {
    background: yellow;
    border: 10px solid;
}

.child {
    height:40px;
    width:40px;
}

</style>
<script src="../../resources/check-layout.js"></script>

<body onload="checkLayout('.grid')">

<div class="grid frGrid" data-expected-width="400" data-expected-height="250" data-expected-client-width="300" data-expected-client-height="150">
    <div class="item" data-expected-width="300" data-expected-height="150" data-expected-client-width="200" data-expected-client-height="50">X</div>
</div>

<div class="grid borderMargin fit-content frRowsGrid" data-expected-width="140" data-expected-height="100" data-expected-client-width="100" data-expected-client-height="60">
    <span data-expected-width="100" data-expected-height="60" data-expected-client-width="80" data-expected-client-height="40">
        <div class="child"></div>
    </span>
</div>

<div class="grid borderMargin fit-content frColsGrid" data-expected-width="100" data-expected-height="140" data-expected-client-width="60" data-expected-client-height="100">
    <span data-expected-width="60" data-expected-height="100" data-expected-client-width="40" data-expected-client-height="80">
        <div class="child"></div>
    </span>
</div>

</body>