grid

1 month ago · a8fe5ba6a3
2 changed files with 168 additions and 0 deletions
--- a/12_grid/index.html
+++ b/12_grid/index.html
@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Galerie přes Grid</h1>
+
+    <!-- div.grid-container>div.grid-item*12>(h3+p) -->
+     <div class="grid-container">
+        <div class="grid-item">
+            <h3>Položka 1</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka 2</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka 3</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka 4</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka 5</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka 6 </h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+        <div class="grid-item">
+            <h3>Položka</h3>
+            <p>Obsah položky na webu</p>
+        </div>
+     </div>
+    
+</body>
+</html>
--- a/12_grid/style.css
+++ b/12_grid/style.css
@ -0,0 +1,103 @@
+body {
+    margin: 0;
+    padding: 20px;
+    background-color: #f0f0f0;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 30px;
+}
+
+.grid-container {
+    display:grid;
+    /* vytvoříme 3 sloupce se stejnou říkou -> 1fr - 1fraction(část) */
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 20px;
+
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.grid-item{
+    background-color: bisque;
+    padding: 20px;
+    border-radius: 15px;
+    text-align: center;
+
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    transition: traform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.grid-item h3{
+    margin-top: 0;
+    color: #444;
+}
+
+.grid-item p {
+    color: #777;
+    margin-bottom: 0;
+}
+
+.grid-item:hover{
+    transform: scale(1.05);
+    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+    cursor: pointer;
+}
+
+/* odd - liché položky */
+.grid-item:nth-child(odd){
+    background-color: aqua;
+}
+/* even - sudé položky */
+.grid-item:nth-child(even){
+    background-color: aquamarine;
+}
+.grid-item:first-child {
+    background-color: indianred;
+    grid-column: span 2;
+}
+.grid-item:last-child {
+    background-color: rosybrown;
+}
+/* 768px max šířka pro tablety */
+@media only screen and (max-width: 768px) {
+    .grid-container {
+        grid-template-columns: 1fr 1fr;
+    }
+    .grid-item:first-child {
+        grid-column: span 1;
+    }
+}
+
+/* 480px max šířka pro telefony */
+@media only screen and (max-width: 480px) {
+    body {
+        padding: 10px;
+    }
+    .grid-container {
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+    .grid-item {
+        padding: 20px;
+    }
+    h1 {
+        font-size: 24px;
+    }
+}
+/* pro každý 3. potomek (3,6,9,12...*/
+.grid-item:nth-child(3n) {
+    border: 3px solid #ff6b6b;
+}
+
+/* pro všechny kromě(not) první */
+.grid-item:not(:first-child){
+    opacity: 0.5;
+}
+
+/*první 3 položky*/
+.grid-item:nth-child(-n+3) {
+    font-weight: bold;
+}