lee2sman/css-grid-visually-example.html

## css-grid-visually-example.html
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  grid:
  	"first first  second" 120px
    "third fourth second" 120px
    "fifth fifth  fifth " 120px
    /1fr   1fr    1fr;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-area: first;
}

.item2 {
  grid-area: second;
}

.item3 {
    grid-area: third;
}
.item4 {
    grid-area: fourth;
}

.item5 {
    grid-area: fifth;
}
</style>
</head>
<body>

<h1>A Five Items Grid Layout</h1>

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
</div>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

<p>Item 1, 2, and 5 are set to span multiple columns or rows.</p>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.grid-container {
	display: grid;
	gap: 10px;
	background-color: #2196F3;
	padding: 10px;
	grid:
	"first first second" 120px
	"third fourth second" 120px
	"fifth fifth fifth " 120px
	/1fr 1fr 1fr;
	}

	.grid-item {
	background-color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 20px;
	font-size: 30px;
	}

	.item1 {
	grid-area: first;
	}

	.item2 {
	grid-area: second;
	}

	.item3 {
	grid-area: third;
	}
	.item4 {
	grid-area: fourth;
	}

	.item5 {
	grid-area: fifth;
	}
	</style>
	</head>
	<body>

	<h1>A Five Items Grid Layout</h1>

	<div class="grid-container">
	<div class="grid-item item1">1</div>
	<div class="grid-item item2">2</div>
	<div class="grid-item item3">3</div>
	<div class="grid-item item4">4</div>
	<div class="grid-item item5">5</div>
	</div>

	<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

	<p>Item 1, 2, and 5 are set to span multiple columns or rows.</p>

	</body>
	</html>