Ich habe 2012 meine Webseite mit einem WYSIYG-Editor erstellt und 2013 mit dieser Anleitung in Joomla übertragen. Aber wenn ich das Grid-Layout verstanden habe, werde ich es mit einem Blank-Theme neu erstellen.
Jedenfalls habe ich mir ein Video über Grid angesehen und es auch mal versucht und es hat nicht geklappt.
Die entsprechende PHP-Datei:
<div class="kategorie-header">
<?php if ($this->params->get('show_category_title')) : ?>
<h2 class="subheading-category">
<?php echo JHtml::_('content.prepare', $this->category->title, '', 'com_content.category.title'); ?>
</h2>
<?php endif; ?>
<?php if ($this->params->get('show_description', 1) || $this->params->def('show_description_image', 1)) : ?>
<div class="category-desc">
<?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
<img src="<?php echo $this->category->getParams()->get('image'); ?>"/>
<?php endif; ?>
<?php if ($this->category->description && $this->params->get('show_description')) : ?>
<?php echo JHtml::_('content.prepare', $this->category->description, '', 'com_content.category'); ?>
<?php endif; ?>
<div class="clr"></div>
</div>
</div>
CSS:
.kategorie-header {
display: grid;
width: fit-content;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.kategorie-header h2.subheading-category {
grid-column-start: 2;
}
.kategorie-header p.category-desc {
grid-column-start: 2;
grid-row-start: 2;
}
.kategorie-header img.category-desc {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 2;
}
Warum funktioniert es nicht? Ich habe es so verstanden, dass es zwingend ein übergeordnetes div braucht oder könnte ich auch einfach überall das dazu schreiben, was ich bei .kategorie-header geschrieben habe?
Und muss ich grid-column-end oder grid-row-end auch schreiben, wenn ich das Element sowieso nur in einem Raster haben möchte? Bzw. Muss ich überhaupt grid-row-start schreiben, wenn ich nur die Spalte ändern will?