Diese Woche hat Kirsten Schelper in ihrem Blog mit Elisabeth Hölzl (die netzialisten) eine spannende Frage gestellt. Sie wollte bei einem 3-Spalten-Layout (mit Gutenberg aka Block-Editor erstellt) die Tablet-Ansicht anpassen. Das Problem ist nämlich, dass die drei Spalten in der Desktop-Ansicht natürlich so bestehen bleiben und in der Mobilansicht zum 1-Spalten-Layout verändert werden. Nur in der Tablet-Ansicht ergibt sich bei drei Spalten nun ein Problem, denn da wird es zweispaltig. Die erste Zeile wird gefüllt und die zweite Zeile enthält nur noch den Inhalt der letzten Spalte …

Kirsten beendet ihren Artikel mit dem Satz „Wenn ihr eine Idee habt, nur her damit!“ – also suchte ich los und fand auf Stackoverflow eine mögliche Lösung. Die Technik wurde nicht von Lea Verou erfunden, aber von ihr verfeinert. Leider ist der Artikel vom Erfinder der Technik nicht mehr online.

Das Ganze basiert auf einer Kombination von :first-child und :nth-last-child. Ein Element soll dann angesprochen werden, wenn zugleich das erste Element ist (:first-child) und (von hinten gezählt), zum Beispiel das Dritte (:nth-last-child(3)).

Kombiniert mit dem generischen Geschwister-Selektor, der die übrigen Spalten anspricht, haben wir jetzt alles an der Hand um das Problem zu lösen und nur die erste Spalte im Tabletmodus anzusprechen und die Margins für die anderen zu resetten:

@media (min-width:600px) and (max-width:781px) {

	.wp-block-column:first-child:nth-last-child(3) {
	  flex-basis: 100% !important;
	}

	.wp-block-column:first-child:nth-last-child(3) ~ .wp-block-column {
	  margin-left: 0 !important;
	}

}

Eine andere Lösung hat Florian Brinkmann in den Kommentaren angeboten. Er fügt einfach die Klasse .has-3-columns wieder hinzu (wobei die Zahl natürlich von der Anzahl Spalten abhängt). (Link zum Gist)

<?php
/**
 * Add has-\d-columns class to columns blocks after 5.3 update.
 * 
 * @param string $block_content The block content about to be appended.
 * @param array  $block         The full block, including name and attributes.
 * 
 * @return string 
 */
add_filter( 'render_block', function( $block_content, $block ) {
	// Check if we have no columns block.
	if ( $block['blockName'] !== 'core/columns' ) {
		return $block_content;
	}

	// Check if the columns block already has a has-\d-columns class.
	if ( preg_match( '/<div class="(?:.* )?(wp-block-columns (?:.*)has-\d-columns|has-\d-columns (?:.*)wp-block-columns)(?: .*)?"(?:.*)>/', $block_content ) === 1 ) {
		return $block_content;
	}

	$columns_count = count( $block['innerBlocks'] );

	// Add the class to the markup.
	$block_content = preg_replace( '/<div class="(.* )?wp-block-columns( .*)?"(.*)>/', sprintf(
		'<div class="$1wp-block-columns has-%d-columns $2"$3>',
		$columns_count
	), $block_content );

	return $block_content;
}, 10, 2 );

Dann kan über das einfach :first-child die Spalte gestylt werden, wie im Ursprungsartikel schon vorgestellt:

@media (min-width: 600px) and (max-width: 781px) {
  .wp-block-columns.has-3-columns {
    flex-flow: row wrap;
  }
  
  .has-3-columns .wp-block-column:first-child {
    flex-basis: 100%;
  }
}

Spannende CSS-Frage mit zwei einfachen Lösungen. Habt ihr noch mehr Ideen dazu? Dann ab damit in die Kommentare. Entweder hier oder bei Kirsten & Elisabeth!