Mastodawn

#Development #Techniques
Adventures in CSS subgrid · Lining up content across multiple columns https://ilo.im/16b6q4

_____
#Alignments #Content #Layouts #CssGrid #CssSubgrid #Browsers #WebDev #Frontend #CSS

Adventures in subgrid

Recently, I have solved several CSS layout problems using subgrid. I share my examples and refer to some other subgrid solutions in an article by Josh Comeau.

Jeff Bridgforth

Agentur kulturbanause Oct 17, 2017

Interessante Features des CSS Grid Layouts

CSS Grids erlauben Layouts die weit über die Gestaltungsmöglichkeiten von Floats und auch der Flexbox hinausgehen. Manuel Matuzovic präsentiert einige interessante und nützliche CSS Grid Layout-Features – beispielsweise negative Werte – und veranschaulicht diese anhand von Beispielen. Direkter Link zum Artikel

https://kulturbanause.de/news/interessante-features-des-css-grid-layouts/

Agentur kulturbanause Jun 15, 2017

Die minmax() Funktion des CSS Grid Layouts

Eine der vielen neuen Eigenschaften des CSS Grid Layouts ist die äußerst nützliche minmax()-Funktion. Ire Aderinokun vermittelt alles Wissenswerte rund um dieses neue Merkmal und zeigt anhand von Beispielen die Einsatzgebiete der sechs verschiedenen Wertetypen. Direkter Link zum Artikel

https://kulturbanause.de/news/minmax-css-grid-layouts/

Agentur kulturbanause Aug 2, 2017

Die Einheit »fr« im CSS Grid Layout

Mit dem CSS Grid Layout erhalten wir eine neue Längeneinheit: Die fr-Einheit. fr ist eine Brucheinheit und 1fr ist 1 Teil des verfügbaren Platzes. Robin Rendle erklärt die flexible Längeneinheit und zeigt Vorteile auf. Direkter Link zum Artikel

https://kulturbanause.de/news/die-einheit-fr-im-css-grid-layout/

Agentur kulturbanause Aug 8, 2017

CSS Grid Layout und die repeat-Funktion

Bei einer großen Anzahl von Spalten und/oder Zeilen können die CSS-Anweisungen durch die repeat-Notation präziser und leichter verständlich gestaltet werden. Die repeat-Funktion kann in den CSS-Grid-Eigenschaften grid-template-columns und grid-template-rows verwendet werden. Eine Übersicht vermittelt alligator.io. Direkter Link zum Artikel

https://kulturbanause.de/news/css-grid-layout-und-die-repeat-funktion/

Agentur kulturbanause Oct 13, 2017

Explicit und Implicit Grids im CSS Grid Layout

Das CSS Grid Layout bietet die Möglichkeit, Raster in CSS zu definieren und Objekte in Rasterzellen zu platzieren. Dabei müssen wir nicht jede Zelle, Spalte und Zeile manuell angeben und ebenso wenig müssen wir jedes Objekt manuell platzieren. CSS Grids sind flexibel genug, um sich Objekte automatisch zu platzieren. Dies wird durch das sogenannte explizite und implizite Raster gehandhabt. Um was es sich dabei handelt und worin der Unterschied besteht, erläutert Manuel Matuzovic. Direkter […]

https://kulturbanause.de/news/explicit-und-implicit-grids-im-css-grid-layout/

🇩🇪 𝕳𝖆𝖑𝖑𝖊𝕬𝖓𝖉𝖊𝖗𝖙 Mar 11

In #Google #Chrome, it is possible to apply self-alignment attributes such as align-self, justify-self, and place-self to the grid container within a block element. According to the official specification, this should not be possible. #Firefox is more precise in this case, so it is only possible to align an element (grid subelement) within a grid container itself.

https://www.w3.org/TR/css-grid-1/#alignment

#css #frontend #web #development #browser #cssgrid #grid #w3c #webstandards web #technology

CSS Grid Layout Module Level 1

MapTheClouds Feb 27

Day 19/100: Mondrian generator 🎨

Constraint: no JavaScript, no canvas, no SVG. Just #HTML5 + #CSSGrid.
#Perl script generates layouts via recursive subdivision → pure HTML output.

CSS Grid gaps = Mondrian's black lines. Grid cells = colored blocks. Composition emerges from structure.
~3KB result. Works in every modern browser. Fully readable source.

Generative art = aesthetic principles as algorithms.

https://github.com/alexaac/mondrian-html-only

#100DayMapChallenge #GenerativeArt #CreativeCoding

Inautilo Feb 24

#Development #Comparisons
Embrace the chaos · The shape and flow of masonry layouts https://ilo.im/16av8m

_____
#ModernCSS #Layouts #Masonry #CssGrid #CssFlexbox #Design #WebDesign #WebDev #Frontend #CSS

Patrick - Embrace the chaos — The shape and flow of masonry layouts

Ramblings about the layout shape and item flow in masonry, and how that compares to other types of CSS layouts. Masonry is a pretty unique layout type, one where embracing the chaos of the layout can be the best approach.

Patrick Brosset