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

<!DOCTYPE html>
<html>
	<head>
		<style>
.grid-container {
    display: grid;
    background-color: dodgerblue;
    padding: 10px;
    grid-auto-columns: 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 'auto' is the default value. It makes the size of the columns determined by the size of the container.</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>