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;
}
