Home
1st Semester
CodeTantra

Unit IV - Grids - Lesson 1 - Part 2

5.1.10. align-items

<!doctype html>
<html>
	<head>
		<link href="style.css" rel="stylesheet" />
	</head>
	<body>
		<!-- Write your code below -->
		<div class="grid-container">
			<div class="grid-item">One</div>
			<div class="grid-item">Two</div>
			<div class="grid-item">Three</div>
			<div class="grid-item">Four</div>
		</div>
	</body>
</html>

/* Write your code below */
.grid-item {
	background-color: silver;
	border: 1px solid white;
	color: white;
}
.grid-container {
	display: grid;
	grid-template-rows: repeat(2,100px);
	grid-template-columns: repeat(2,100px);
	background-color: black;
	width: 250px;
	height: 250px;
	row-gap: 20px;
	column-gap: 20px;
	align-items: center;
}

5.1.11. place-items

<!doctype html>
<html>
	<head>
		<link href="style.css" rel="stylesheet" />
	</head>
	<body>
		<!-- Write your code below -->
		<div class="grid-container">
			<div class="grid-item">One</div>
			<div class="grid-item">Two</div>
			<div class="grid-item">Three</div>
			<div class="grid-item">Four</div>
		</div>
	</body>
</html>

/* Write your code below */
.grid-item {
	background-color: red;
	border: 1px solid white;
	color: white;
}
.grid-container {
	display: grid;
	grid-template-rows: repeat(2,100px);
	grid-template-columns: repeat(2,100px);
	background-color: black;
	width: 250px;
	height: 250px;
	row-gap: 10px;
	column-gap: 20px;
	place-items: center;
}

5.1.12. `fr` unit

/* Write your code below */
.grid-item {
	background-color: red;
	border: 1px solid white;
}
.grid-container1 {
	display: grid;
	height: 100px;
	grid-template-columns: 75% 25%;
	background-color: black;
	column-gap: 50px;
	border: 1px solid black;
}
.grid-container2 {
	display: grid;
	height: 100px;
	grid-template-columns: 3fr 1fr;
	background-color: black;
	column-gap: 50px;
	border: 1px solid black;
}

5.1.13. min-content, max-content

/* Write your code below */
.grid-item {
	background-color: darkcyan;
	color: white;
	border: 1px solid white;
}
.grid-container1 {
	display: grid;
	height: 100px;
	grid-template-columns: min-content 1fr;
	background-color: black;
	column-gap: 50px;
	border: 1px solid black;
}
.grid-container2 {
	display: grid;
	height: 100px;
	grid-template-columns: max-content 1fr;
	background-color: black;
	column-gap: 50px;
	border: 1px solid black;
}

5.1.14. fit-content()

/* Write your code below */
.grid-item {
	background-color: firebrick;
	border: 1px solid white;
}
.grid-container {
	display: grid;
	height: 100px;
	grid-template-columns: fit-content(100px) 1fr;
	column-gap: 50px;
	border: 1px solid black;
}

5.1.15. min(), max(), minmax()

/* Write your code below */
.grid-item {
	background-color: royalblue;
	color: white;
	border: 1px solid white;
}
.grid-container {
	display: grid;
	height: 100px;
	grid-template-columns: min(50px) max(100px) minmax(50px, 1fr);
	column-gap: 50px;
	border: 1px solid black;
}

5.1.16. repeat()

/* Write your code below */
.grid-item {
	background-color: chocolate;
	color: white;
	border: 1px solid white;
}
.grid-container {
	display: grid;
	height: 100px;
	grid-template-columns: repeat(3, 300px);
	column-gap: 50px;
}

5.1.17. grid-row-start

<!doctype html>
<html>
	<head>
		<link href="hidden.css" rel="stylesheet" />
		<link href="style.css" rel="stylesheet" />
	</head>
	<body>
		<!-- Write your code below -->
		<div class="grid-container">
			<div id="mouse"></div>
			<div id="cheese"></div>
		</div>
	</body>
</html>

.grid-container {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 25% 25% 25% 25%;
}

#mouse {
	/* Write your code below */
	grid-row-start: 3;
}

5.1.18. grid-row-end

<!doctype html>
<html>
	<head>
		<link href="hidden.css" rel="stylesheet" />
		<link href="style.css" rel="stylesheet" />
	</head>
	<body>
		<!-- Write your code below -->
		<div class="grid-container">
			<div class="mouse"></div>
			<div class="cheese"></div>
		</div>
	</body>
</html>

.grid-container {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 25% 25% 25% 25%;
}

.cheese {
	grid-row-start: 1;
	/* Write your code below */
	grid-row-end: 4
}

5.1.19. grid-column-start

<!doctype html>
<html>
	<head>
		<link href="hidden.css" rel="stylesheet" />
		<link href="style.css" rel="stylesheet" />
	</head>
	<body>
		<!-- Write your code below -->
		<div class="grid-container">
			<div id="mouse"></div>
			<div id="trap"></div>
		</div>
	</body>
</html>

.grid-container {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 25% 25% 25% 25%;
}

#mouse {
	/* Write your code below */
	grid-row-start: 3;
	grid-column-start: 4;
}

5.1.20. grid-column-end

<!doctype html>
<html>
	<head>
		<link href="hidden.css" rel="stylesheet" />
		<link href="style.css" rel="stylesheet" />
	</head>
	<body>
		<!-- Write your code below -->
		<div class="grid-container">
			<div class="mouse"></div>
			<div class="trap"></div>
		</div>
	</body>
</html>

.grid-container {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 25% 25% 25% 25%;
}

.trap {
	grid-row-start: 3;
	/* Write your code below */
	grid-column-start: 1;
	grid-column-end: span 4
}

5.1.21. grid-row & grid-column

.cheese {
	/* Write your code below */
	grid-column: 2/5;
	grid-row: 1/5;
}

5.1.22. grid-area

.grid-container {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 25% 25% 25% 25%;
}
/* Write your code below */
.mouse {
	grid-area: 2 / 2 / 4 / 4;
}
.cheese {
	grid-area: 2 / 2 / 4 / 4;
}

5.1.23. justify-self

/* Write your code below */
#mouse {
	grid-column-start: 4;
	justify-self: end;
}

5.1.24. align-self

/* Write your code below */
#mouse {
	grid-row-start: 4;
	grid-column-start: 4;
	justify-self: end;
	align-self: end;
}

5.1.25. place-self

/* Write your code below */
#mouse {
	grid-row-start: 4;
	grid-column-start: 1;
	place-self: center;
}

Post a Comment