add css grid

Sascha Schulz

2023-10-24 4ced53fb3c3186b163d1e43117dca935013ec6c9

 index.html

@@ -2903,8 +2903,8 @@
                  </ul>
               </section>
               <section>
                  <p>hidden</p>
                  <img data-src="/assets/images/css-display-hidden.svg">
                  <p>none</p>
                  <img data-src="/assets/images/css-display-none.svg">
                  <ul>
                     <li>unsichtbar</li>
                     <li>Platz wird nicht länger beansprucht, so als wenn das Element nicht im DOM wäre</li>
@@ -3064,6 +3064,166 @@
                  <h3>Aufgabe</h3>
                  <p>Mit CSS Flexbox rumspielen</p>
               </section>
               <section>
                  <h3>CSS Grid</h3>
               </section>
               <section>
                  <h3>Terminologie</h3>
                  <img data-src="/assets/images/css-grid-terminology.drawio.svg">
               </section>
               <section>
                  <pre>
                     <code class="css" data-trim data-line-numbers="">
                        .grid {
                           display: grid; /* inline-grid; */
					
                           grid-template-columns: 1fr 1fr 1fr;
                           grid-template-rows: 1fr 1fr;
									
                           gap: 5px 10px;
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="html" data-trim data-line-numbers="">
                        &lt;div class="grid"&gt;
                           &lt;span&gt;A&lt;/span&gt;
                           &lt;span&gt;B&lt;/span&gt;
                           &lt;span&gt;C&lt;/span&gt;
                           &lt;span&gt;D&lt;/span&gt;
                           &lt;span&gt;E&lt;/span&gt;
                           &lt;span&gt;F&lt;/span&gt;
                        &lt;/div&gt;
                     </code>
                  </pre>
               </section>
               <section>
                  <iframe data-src="/assets/html/css-grid-example-1.html"></iframe>
               </section>
               <section>
                  <pre>
                     <code class="css" data-trim data-line-numbers="">
                        .grid {
                           grid-template-columns: [left] 1fr [column1] 1fr [column2] 1fr [right];
                           grid-template-rows: [top] 1fr [row1] 1fr [bottom];
                        }
								
                        .a {
                           grid-column: 2 / span 2;
                           grid-row: 1;
                        }
								
                        .b {
                           grid-column: left / column2;
                           grid-row: 2;
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="html" data-trim data-line-numbers="">
                        &lt;div class="grid"&gt;
                           &lt;span class="a"&gt;A&lt;/span&gt;
                           &lt;span class="b"&gt;B&lt;/span&gt;
                        &lt;/div&gt;
                     </code>
                  </pre>
               </section>
               <section>
                  <iframe data-src="/assets/html/css-grid-example-2.html"></iframe>
               </section>
               <section>
                  <pre>
                     <code class="css" data-trim data-line-numbers="">
                        .grid {
                           grid-template-areas:
                              "header header header"
                              "content content content";
                        }
					
                        .a {
                           grid-area: header;
                        }
					
                        .b {
                           grid-area: 2 / 1 / 2 / 3; /* start-row / start-column / end-row / end-column */
                              /* alternativ auch Namen der Lines möglich */
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <iframe data-src="/assets/html/css-grid-example-3.html"></iframe>
               </section>
               <section>
                  <h3>Aufgabe</h3>
                  <p>Implementiere folgendes Design:</p>
                  <iframe data-src="/assets/html/css-grid-excercise.html"></iframe>
               </section>
               <section>
                  <h3>Lösung</h3>
                  <pre>
                     <code class="css" data-trim data-line-numbers="">
                        .grid {
                           display: grid;
									
                           grid-template-rows: 1fr 5fr 1fr;
									
                           gap: 2px;
					
                           grid-template-areas:
                              "navigation header header header"
                              "navigation content content content"
                              "footer footer footer footer"
                        }
					
                        .navigation {
                           grid-area: navigation;
                        }
					
                        .header {
                           grid-area: header;
                        }
					
                        .content {
                           grid-area: content;
                        }
					
                        .footer {
                           grid-area: footer;
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="html" data-trim data-line-numbers="">
                        &lt;div class="grid"&gt;
                           &lt;div class="area navigation"&gt;Navigation&lt;/div&gt;
                           &lt;div class="area header"&gt;Header&lt;/div&gt;
                           &lt;div class="area content"&gt;Content&lt;/div&gt;
                           &lt;div class="area footer"&gt;Footer&lt;/div&gt;
                        &lt;/div&gt;
                     </code>
                  </pre>
               </section>
               <section>
                  <h4>Platzierug des Inhalts</h4>
                  <pre>
                     <code class="css" data-trim data-line-numbers="">
                        .grid {
                           align-items: center;
                           justify-items: center;
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <iframe data-src="/assets/html/css-grid-example-4.html"></iframe>
               </section>
            </section>
         </div>
      </div>