Galerie ohne Media Query erstellen nur mit CSS Display Grid (Nur CSS & HTML) [Anleitung / Tutorial]

von | Sep 4, 2020 | Allgemein, Mein Youtube Kanal | 0 Kommentare

Schlagwörter: WordPress Plugin

Ich habe heute mal wieder eine echt coole CSS Anleitung mitgebracht. Und zwar kennt ihr alle diese nervigen Galerien die sehr kompliziert zu programmieren sind und sehr langsam sind. In der heutigen Anleitung zeige ich euch einen Weg wie man mit CSS und nur 3 Zeilen CSS Code eine sehr schöne Galerie erstellen kann. Ab sofort müsst ihr keine grossen Galerie Plugins für WordPress mehr einsetzen, sondern könnt euch euer Design selbst einprogrammieren.

Video / Anleitung

HTML

1
2
3
4
5
6
7
8
9
10
11
<main>
	<div class="card">
		<div class="info">
			<strong>Mein Titel</strong>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
                        magna</p>
		</div>
		<img src="https://source.unsplash.com/random/800x600/?switzerland">
	</div>	
...
</main>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
main {
		display: grid;
		/*grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));*/
		grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
		grid-gap: 1rem;
 
 
	}
 
	main .card img {
		width: 100%;
	}
 
 
	main .card {
		transition: transform 500ms;
	}
 
	main .card:hover {
		transform: translateY(-10px);
	}

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert