andy/webdev
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

grid

Browse Source
This commit is contained in:
Andy
2020-03-10 15:46:48 +01:00
parent b449bc746b
commit 9158814bde
5 changed files with 121 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/grid.html
+90
View File
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Die HTML Struktur in Webseiten">
<title>HTML Struktur</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/code.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/grid.css">
</head>
<body>
<header>
<div class="wrapper">
<a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
<nav role="navigation">
<ul>
<li><a href="float.html">Float</a></li>
<li><a href="position.html">Position</a></li>
<li><a href="flexbox.html">Flexbox</a></li>
<li><a href="grid.html">Grid</a></li>
</ul>
</nav>
</div>
</header>
<main role="main" class="wrapper">
<h1>Inhalt strukturieren mit Grid</h1>
<article>
<h2>Zweidimensionales Grid</h2>
<div class="bigbox">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</article>
<article class="">
<h2>Die Boxen</h2>
<pre class="line-numbers language-html">
<code class="language-html">&lt;div class=&quot;bigbox&quot;&gt;
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
<h2>& Grid 3 Zeilen, 3 Spalten</h2>
<pre class="line-numbers language-html">
<code class="language-css">.bigbox{
display: grid;
grid-template-columns: 25% 25% auto;
grid-template-rows: auto auto auto;
grid-gap: 1em;
border: 2px solid yellowgreen;
}
.box{
width: 100%;
height: 150px;
background-color: yellowgreen;
}
</code>
</pre>
</main>
<footer>
<div class="wrapper">
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
</div>
</footer>
<script src="../js/code.js"></script>
</body>
</html>