zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ein Layout wie auf dieser Seite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.04.2020, 14:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 84
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard Ein Layout wie auf dieser Seite

Hallo Leute,

Ich hätte gerne ein Layout mit mehreren Bausteinen, die alle die gleiche Breite und Höhe haben, auch wenn der Inhalt variieren kann.

Beispielsweise sowie auf der folgenden Seite im Abschnitt unsere Leistungen
https://zarinbeauty.de/index.html

Macht man so etwas am besten mit FLEXBOX oder mit CSS GRID?
Welche Suchbegriffe helfen mir ein passendes Beispiel zu finden?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.04.2020, 15:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 84
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Was kann ich denn tun, damit beim folgenden Beispiel alle Elemente die gleiche Höhe haben?

Code:
<!doctype html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>

	body {
		min-height: 1000px;
		font-family: sans-serif;
		line-height: 150%;
	}
	
	.grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */
	}

	.grid div {
		background: #257989;
		border: 2px solid #1d606d;
		color: white;
		margin: 1em;
		padding: 1em;
	}
	
</style>
</head>
<body>
	<div class="grid">
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit facere alias, consequuntur laboriosam fugit, dolor quibusdam, cumque repellat commodi dolorem nemo blanditiis molestias exercitationem obcaecati dolores fugiat pariatur vero vel.</div>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad fuga commodi minus, fugit porro consectetur corporis esse officia neque nihil facere nulla architecto rerum consequuntur, ipsam ex perspiciatis beatae quae.</div>
		<div>Lorem ipsum dolor sirendis dolore iusto nobis esse eum distinctio maxime ipsum, itaque voluptatum, sunt fuga quae libero! Temporibus!</div>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque cum voluptates aut autem repudiandae saepe quo alias, earum explicabo nobis vel quisquam, rem aperiam maxime sit porro similique. Quos, eius.</div>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima molestias, mollitia sapiente error natus. Maiores voluptate, nesciunt magnam quos blanditiis, vero sequi enim a non consequuntur at, sit sapiente. Obcaecati.</div>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi vel quibusdam commodi quidem quasi alias, quas hic totam amet, obcaecati odit suscipit dolores iusto aliquam beatae praesentium ipsam velit maxime.</div>
		<div>Lorem ipsum dolor sirendis dolore iusto nobis esse eum distinctio maxime ipsum, itaque voluptatum, sunt fuga quae libero! Temporibus!</div>
		<div>Lorem ipsum dolor sirendis dolore iusto nobis esse eum distinctio maxime ipsum, itaque voluptatubus!</div>
	</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.05.2020, 16:37
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Moin Sabine, das geht recht simpel, Ergänzung zu .grid


Code:
grid-template-rows: 1fr 1fr;
Bei deinen zwei Reihen und gewünschter gleicher Höhe sind die Fractions ( die fr) natürlich dann gleich ... wenn du drei Spalten mit gleicher Höhe haben willst, dann hast du drei fr zu je 1...

Du könntest aber auch so schreiben bei z.B. drei Reihen (diehier die fractions sind: 0.5fr 1fr 0.5fr

Dann wäre die mittlere Reihe doppelt so hoch wie die anderen.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #4 (permalink)  
Alt 02.05.2020, 11:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 84
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von andir Beitrag anzeigen
Moin Sabine, das geht recht simpel, Ergänzung zu .grid


Code:
grid-template-rows: 1fr 1fr;
Bei deinen zwei Reihen und gewünschter gleicher Höhe sind die Fractions ( die fr) natürlich dann gleich ... wenn du drei Spalten mit gleicher Höhe haben willst, dann hast du drei fr zu je 1...

Du könntest aber auch so schreiben bei z.B. drei Reihen (diehier die fractions sind: 0.5fr 1fr 0.5fr

Dann wäre die mittlere Reihe doppelt so hoch wie die anderen.

Vielen lieben Dank für deine Hilfe und die Erklärung dazu!
Du hast mir sehr geholfen.
Ich wünsche dir ein schönes Wochenende und eine gute Zeit!
Mit Zitat antworten
  #5 (permalink)  
Alt 14.05.2020, 13:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 84
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von andir Beitrag anzeigen
Moin Sabine, das geht recht simpel, Ergänzung zu .grid


Code:
grid-template-rows: 1fr 1fr;
Bei deinen zwei Reihen und gewünschter gleicher Höhe sind die Fractions ( die fr) natürlich dann gleich ... wenn du drei Spalten mit gleicher Höhe haben willst, dann hast du drei fr zu je 1...
Habe noch eine Frage zu der ganzen Thematik.
Mit dem Code
Code:
grid-template-rows: 1fr 1fr;
sind alle Elemente, die sich über zwei Zeilen erstrecken, gleich hoch.

Beispielsweise habe ich acht Elemente und diese erstrecken sich über zwei Zeilen.
Wenn ich das ganze auf einem Smartphone anschaue, dann ist in jeder Zeile ein Element und es sind dann eben acht Zeilen. Nur die ersten beiden Elemente haben dann die gleiche Höhe und die anderen Elemente haben eine ihres Inhaltes entsprechender Höhe.
Wie bekomme ich es hin, dass alle acht Elemente auch auf einem Smartphone oder egal wie viele Zeilen vorhanden sind gleich hoch sind?
Brauche ich dann wirklich den folgenden Code
Code:
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
Wie sieht es beispielsweise aus, wenn ich 50 Elemente habe, die auch auf einem Smartphone, wenn es nur ein Element pro Zeile gibt, alle die gleiche Höhe haben?
Mit Zitat antworten
  #6 (permalink)  
Alt 14.05.2020, 15:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.073
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

dafür kannst du "grid-auto-rows" verwenden, damit definierst du die Höhe von dynamischen Zeilen. Also wenn du zB vorher nicht weißt wie viele Zeilen du hast.

grid-auto-rows: 1fr;

https://developer.mozilla.org/en-US/...grid-auto-rows
Mit Zitat antworten
  #7 (permalink)  
Alt 14.05.2020, 16:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 84
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
dafür kannst du "grid-auto-rows" verwenden, damit definierst du die Höhe von dynamischen Zeilen. Also wenn du zB vorher nicht weißt wie viele Zeilen du hast.

grid-auto-rows: 1fr;

https://developer.mozilla.org/en-US/...grid-auto-rows

Vielen vielen Dank für deine Hilfe!
Wünsche dir noch einen schönen Tag!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Element ausserhalb seite positionieren, so daß keine scrollbar entsteht st-SaHiB CSS 5 20.07.2009 08:49
Layout der Seite mit PHP sumica Serveradministration und serverseitige Scripte 24 30.06.2009 22:00
Untermenü im IE nici CSS 10 22.06.2009 21:19
Probleme mit Layout kruemelchen26 CSS 0 15.05.2007 22:40
Design, Layout und Aufbau meiner Seite Jache84 Site- und Layoutcheck 40 15.02.2007 12:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:40 Uhr.