%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

%Hyperlinks
\usepackage{multicol}

% Zeilenabstand in verbatim
\usepackage{fancyvrb}


%Kopfzeile
\ihead{CSS}
\chead{}
\ohead{http://kohnlehome.de/html/css-grid.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
CSS Grid Layout
\end{center}
%\section*{Ziellayout}
\begin{Verbatim}[baselinestretch=0.1]
                                  +---------+-------------+
                                  |        header         |
                                  +---------+-------------+
                                  |   nav   |   main      |
                                  +---------+-------------+
                                  |        footer         |
                                  +---------+-------------+
\end{Verbatim}

\hrule
\vspace{0.3cm}

\begin{minipage}[t]{0.5\textwidth}
\section*{A) Mit Spalten und Zeilen}
\subsection*{1. Grid Container}
\begin{Verbatim}[baselinestretch=0.1]
<- 20em ->|<--- auto --->
+---------+-------------+-1
|         |             |
+---------+-------------+-2
|         |             |
+---------+-------------+-3
|         |             |
+---------+-------------+-4
|         |             |
1         2             3
\end{Verbatim}
\begin{verbatim}
display: grid;
grid-template-columns: 20em auto;
grid-template-rows: auto 1fr auto;
\end{verbatim}

\subsection*{2. Grid Items}
\subsubsection*{header}
\begin{verbatim}
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
\end{verbatim}

\subsubsection*{nav}
\begin{verbatim}
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
\end{verbatim}

\subsubsection*{main}
\begin{verbatim}
grid-column: 2 / 3;
grid-row: 2 / 3;
\end{verbatim}

\subsubsection*{footer}
\begin{verbatim}
grid-column: 1 / 3;
grid-row: 3 / 4;
\end{verbatim}
\end{minipage}
\begin{minipage}[t]{0.5\textwidth}
\section*{B) Mit Areas}
\subsection*{1. Grid Container}
\begin{Verbatim}[baselinestretch=0.1]
<- 20em ->|<--- auto --->
+---------+-------------+
|    h    |      h      |
+---------+-------------+
|    n    |      m      |
+---------+-------------+
|    f    |      f      |
+---------+-------------+
\end{Verbatim}
\begin{verbatim}
display: grid;
grid-template-columns: 20em auto;
grid-template-rows: auto 1fr auto;
grid-template-areas: 
                    "h h"
                    "n m"
                    "f f";
\end{verbatim}
    
\subsection*{2. Grid Items}
\subsubsection*{header}
\begin{verbatim}
grid-area: h;
\end{verbatim}

\subsubsection*{nav}
\begin{verbatim}
grid-area: n;
\end{verbatim}

\subsubsection*{main}
\begin{verbatim}
grid-area: m;
\end{verbatim}

\subsubsection*{footer}
\begin{verbatim}
grid-area: f;
\end{verbatim}
\end{minipage}

\vspace{0.3cm}
\hrule

\section*{Längeneinheiten}
\begin{itemize}
    \item \texttt{100px}: feste Größe
    \item \texttt{auto}: so groß wie Inhalt
    \item \texttt{1fr 2fr}: 1/3 und 2/3 vom Rest
\end{itemize}

\end{document}
