27.04.2020, 14:43
|
|||
|
|||
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? 
|
| Sponsored Links |
|
27.04.2020, 15:29
|
|||
|
|||
|
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>
|
| Sponsored Links |
|
01.05.2020, 16:37
|
|||
|
|||
|
Moin Sabine, das geht recht simpel, Ergänzung zu .grid
Code:
grid-template-rows: 1fr 1fr; 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
|
|
02.05.2020, 11:35
|
|||
|
|||
|
Zitat:
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!
|
|
14.05.2020, 13:32
|
|||
|
|||
|
Zitat:
Mit dem Code Code:
grid-template-rows: 1fr 1fr; 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;
|
|
14.05.2020, 15:03
|
|||
|
|||
|
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
|
|
14.05.2020, 16:30
|
|||
|
|||
|
Zitat:
Vielen vielen Dank für deine Hilfe! Wünsche dir noch einen schönen Tag!
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
