CSS Grid ist ein sehr nützliches System – man kann hier nämlich sehr einfach ein Grid System aufbauen. Man kann da definieren wie breit so eine Box sein soll – wieviele Kolonnen und Zeilen es haben darf usw.
Im heutigen Video zeige ich euch wie man daraus ein relativ einfaches Grid Menu erstellen kann. Das kann man dann nämlich dann nicht nur für die eigene Webseite einsetzen sondern auch für Projekte im Raspberry Pi und das coole daran ist – auch bei kleinen Bildschirmen funktioniert das ganze, denn es ist responsive und passt sich somit eurer Breite eures Bildschirm automatisch an.
Video
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div class="container">
<h1>Meine Buttons</h1>
<div class="grid">
<div class="box">
<img src="icons/haus.png" />
<h3>Haus</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque,
impedit deserunt nisi veniam dignissimos laboriosam rem culpa
similique veritatis ad.
</p>
<a href="#" class="btn">Mehr Infos</a>
</div>
<div class="box">
<img src="icons/hand.png" />
<h3>Hand</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque,
impedit deserunt nisi veniam dignissimos laboriosam rem culpa
similique veritatis ad.
</p>
<a href="#" class="btn">Mehr Infos</a>
</div>
</div>
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | :root {
--bg: #edf6f9;
--weiss: #ffffff;
--titel: #006d77;
--box: #e29578;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
text-transform: capitalize;
transition: 200ms linear;
}
.container {
background: var(--bg);
padding: 15px 10%;
padding-bottom: 100px;
}
h1 {
text-align: center;
padding-bottom: 15px;
color: var(--titel);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
column-gap: 15px;
row-gap: 15px;
}
.container .grid .box {
background: var(--box);
border-radius: 5px;
text-align: center;
padding: 30px 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: 500ms;
}
.container .grid .box img {
width: 100px;
height: auto;
}
.container .grid .box h3 {
color: var(--bg);
font-size: 1.2rem;
padding: 10px 0;
}
.container .grid .box p {
font-size: 1rem;
line-height: 1.4;
}
.container .grid .box .btn {
margin-top: 10px;
display: inline-block;
background: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
}
.container .grid .box .btn:hover {
letter-spacing: 1.2px;
}
.container .grid .box:hover {
transform: scale(1.1);
} |
0 Kommentare