محرر ويب أونلاين

<!DOCTYPE html>
<html>
	<head>
		<style>
.grid-container {
    display: grid;
    background-color: dodgerblue;
    padding: 10px;
    grid-auto-columns: minmax(50px, auto);
}

.grid-container > div {
    text-align: center;
    background-color: #c1e2ff;
    padding: 10px;
    font-size: 20px;
    border: 1px solid;
}

.item-1 {
    grid-column: 1 / 3;
}

.item-2 {
    grid-column: 1 / 2;
}

.item-3 {
    grid-column: 2 / 3;
}

.item-4 {
    grid-column: 1 / 2;
}

.item-5 {
    grid-column: 2 / 3;
}
		</style>
	</head>
	<body>
        <h1>CSS grid-auto-columns Property</h1>
		<p>The 'grid-auto-columns' property specifies a default column size for all items in the grid.</p>
		<p>The 'minmax()' function sets a size range greater than or equal to min and less than or equal to max.</p>
        <p>Here, the minimum size is 50px and the maximum size is auto.</p>
        <div class="grid-container">
            <div class="item-1">One</div>
            <div class="item-2">Two</div>
            <div class="item-3">Three</div>
            <div class="item-4">Four</div>
            <div class="item-5">Five</div>
        </div>
	</body>
</html>