Hi Leute, ich versuche in CSS gerade eine Grid-Galerie zu erstellen, jedoch stoße ich ständig auf das Problem, dass die Bilder einen leeren Bereich lassen, wenn ein Bild länger ist als das andere. Wie könnte ich das angehen, dass sich die Bilder immer richtig anpassen (Es können unterschiedlich viele sein + die Höhe ist nicht von mir vorgegeben) Habt ihr eine Idee wie das funktionieren könnte?

CSS Grid ohne Leer-Bereiche?

Hi Leute,

ich versuche in CSS gerade eine Grid-Galerie zu erstellen, jedoch stoße ich ständig auf das Problem, dass die Bilder einen leeren Bereich lassen, wenn ein Bild länger ist als das andere.

Bild zum Beitrag

Wie könnte ich das angehen, dass sich die Bilder immer richtig anpassen (Es können unterschiedlich viele sein + die Höhe ist nicht von mir vorgegeben)

Bild zum Beitrag

Habt ihr eine Idee wie das funktionieren könnte?

28.11.2022, 12:03

Mit Float sieht das so aus:

1 Antwort

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, Webentwicklung

28.11.2022, 12:38

Suche im Internet mal nach Masonry-Layouts. Hier findest du schon eine gute Anleitung als Start:

https://kulturbanause.de/blog/responsive-masonry-layout-mit-css/

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Ähnliche Beiträge

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zum Beitrag

Frontend vs Backend?

Was findest du schwerer?

...zum Beitrag

im CSS ein sticky Element auf Bildschirmhöhe?

Ich arbeite gerade an einer Website, wobei ich mit einem CSS-Grid die Bereiche header, nav, footer und main definierte. Mein nav ist dabei auf der rechten Seite des Bildschirms und nimmt 15% der Breite ein. Es sollte sticky sein, da es nur aus 4 Bildern besteht, welche immer zu sehen sein sollten. Dies habe ich schon so. Nun ist das Problem, dass wenn ich scrolle, die Bilder nach oben scrollen, anstatt dort zu bleiben. (Das nav ist so zu sagen zu lang und danach kommt einfach nur noch die Hintergrundfarbe des nav). Wie kann ich machen, dass es eigentlich 100% der Höhe des Bildschirms einnimmt und dann so bleibt?

Seite beim Öffnen

Seite beim bisschen runter scrollen (so sollte es schlussendlich beim weiterscrollen auch sein)

Seite beim noch weiterscrollen

...zum Beitrag

Portfolio Webseite programmieren, aber welche Technologie sollte ich verwerden?

Hallo,

ich programmiere seit einigen Jahren aktiv in verschiedenen Spielen und studiere zudem Informatik. Nun möchte ich eine Portfolio-Webseite erstellen, um mich intensiver mit dem Thema Webentwicklung auseinanderzusetzen. Ziel ist es, meine Person, Projekte und Ideen ansprechend darzustellen.

Besonders wichtig ist mir dabei ein ansprechendes Design.

Ich habe bereits Erfahrungen mit HTML und CSS gesammelt und frage mich nun, ob ich Frameworks wie React oder Vue.js für dieses Projekt nutzen sollte. Welches Framework würdet ihr mir empfehlen, und welches wäre am besten geeignet für eine Portfolio-Webseite?

Ich plane, mich anschließend in das empfohlene Framework einzuarbeiten.

Vielen Dank im Voraus für eure Unterstützung!

Mit freundlichen Grüßen,
Florian R.

...zum Beitrag

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zum Beitrag

Welche Sprache soll ich nach JavaScript lernen?

Ich interessiere mich für backend, aber mit Javascript kann man auch backend programmieren.

Sonst interessiere ich mich für Spiele? Wäre C# was für mich?

...zum Beitrag

CSS/JS Programmieren dass Link erst klickbar wenn?

Hi, ich schreibe eine Website mit so einem Fragebogen gerade und da gibt es einen Button, der zu einer nächsten HTML Seite weiterverlinkt:

<a href="seite2.html"><div>Weiter</div></a>

Ich möchte aber, dass man erst draufklicken und zur nächsten Seite gelangen kann, wenn vorher eine Auswahl getroffen wurde, also eine Bedingung vorher erfüllt ist.

Ich weiß, dass ich das CSS steuern kann wie einen unsichtbaren Knopf erst sichtbar machen, sobald die Bedingung erfüllt ist. Aber ich hätte den "Weiter Knopf" die ganze Zeit da, nur erst klickbar, sobald die Bedingung erfüllt ist. Der Link ist aber Bestandteil vom HTML nicht vom CSS und deswegen weiß ich nicht wie das geht.

Ich hoffe mir kann jemand weiterhelfen. LG

...zum Beitrag

Direkt TypeScript lernen?

…oder zuerst Js dann ts

...zum Beitrag

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

...zum Beitrag

Wird HTMX JavaScript nutzlos machen?

...zum Beitrag

"textarea" html Feld mitwachsen?

<textarea class="form-control" name="Adresse">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Kann man dieses Feld so schreiben, dass es mitwächst. Das KEIN Scrollbalken kommt, sondern wie schon gesagt mitwächst

...zum Beitrag

Online Formular: Felder werden in der PDF verschoben?

bei einem Online Formular habe ich eine ... Code eingebaut, weil das Formular so groß ist. jetzt verschieben sich in der pdf alle felder nach unten, aber die sollen so bleiben wie im online formular. geht das?

<label for="Traeger" style="width: 110px;">Träger</label>

</div>

im Formular:

und in der pdf:

...zum Beitrag