| kod |
wynik kodu |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS grid</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.grid-container {
display: grid;
min-height: calc(100vh - 25px);
grid-template-columns: repeat(2, 300px);
grid-template-rows: repeat(2, 200px);
}
.cell {
border: 2px solid green;
margin: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</body>
</html>
|
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS grid</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.grid-container {
display: grid;
min-height: calc(100vh - 25px);
grid-template-columns: repeat(4, 150px);
grid-template-rows: 300px;
}
.cell {
border: 2px solid green;
margin: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</body>
</html>
|
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS grid</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.grid-container {
display: grid;
min-height: calc(100vh - 25px);
grid-template-columns: 600px;
grid-template-rows: repeat(4, 150px);
}
.cell {
border: 2px solid green;
margin: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</body>
</html>
|
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS grid</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.grid-container {
display: grid;
min-height: calc(100vh - 25px);
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(2, 200px);
}
.cell {
border: 2px solid green;
margin: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
</body>
</html>
|
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS grid</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.grid-container {
display: grid;
min-height: calc(100vh - 25px);
grid-template-columns: repeat(2, 300px);
grid-template-rows: repeat(3, 200px);
}
.cell {
border: 2px solid green;
margin: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
</body>
</html>
|
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS grid</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.grid-container {
border: 2px solid black;
display: grid;
min-height: calc(100vh - 25px);
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.cell {
border: 2px solid green;
margin: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
</div>
</body>
</html>
|
|