код html/php/css, отвечающий за создание колонок посредством панели управления в Joomla - Joomla 3.x: Шаблоны, разметка и макеты вывода

/***** blog columns *****/

.cols-1 {
    display: block;
    float: none !important;
    margin: 0 !important;
}

.cols-2 .column-1 {
    width: 43%;
    float: left;
}

.cols-2 .column-2 {
    width: 43%;
    float: right;
    margin: 0
}

.cols-3 .column-1 {
    float: left;
    width: 33%;
    
    
}

.cols-3 .column-2 {
    float: left;
    width: 33%;
    padding-left:1%;
    
}

.cols-3 .column-3 {
    float: right;
    width: 32%;
    
    
}

.cols-4 .column-1
{
        width:24%;
        float:left;
}

.cols-4 .column-2
{
        width:24%;
        padding-left:1%;
        float:left;
}

.cols-4 .column-3
{
        width:24%;
        padding-left:1%;
        float:left
}

.cols-4 .column-4
{
        width:25%;
        float:right
}

span.row-separator {display:block; clear:both;}

<div class="cols col-2">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<div class="cols col-3">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<div class="cols col-4">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

.cols {
	font-size:0;
	vertical-align:top;
	display:inline-block;
	float:none;
}
.cols > div{
	font-size:14px;
	vertical-align:top;
	display:inline-block;
	float:none;
}
.cols > .col-2{
	width:50%;
}
.cols > .col-3{
	width:33.33%;
}
.cols > .col-4{
	width:25%;
}

<div class="cols col-<?php echo $this->columns; ?>">

<div id="content<?php echo $contentwidth; ?>">
	  
<jdoc:include type="message" /> 
  
<jdoc:include type="component"  style="xhtml" />
  </div> 

<div id="content<?php echo $contentwidth; ?>">
<div class="cols col-<?php echo $this->columns; ?>">
	  
<jdoc:include type="message" /> 
  
<jdoc:include type="component"  style="xhtml" />
</div>
  </div> 

<div id="content<?php echo $contentwidth; ?>">
<jdoc:include type="modules" name="position-3" style="xhtml" />
	  
<jdoc:include type="message" /> 
  
<jdoc:include type="component"  style="xhtml" />
<jdoc:include type="modules" name="position-2" style="none" />
  </div>  

<?php foreach ($this->intro_items as $key => &$item) : ?>

<div class="cols col-<?php echo $this->columns; ?>">

<?php endforeach; ?>

</div>

<?php if (!empty($this->intro_items)) : ?>
	<div class="cols col-<?php echo $this->columns; ?>">
	<?php foreach ($this->intro_items as $key => &$item) : ?>
		<article class="item">
		<?php
			$this->item = &$item;
			echo $this->loadTemplate('item');
		?>
		</article>
	<?php endforeach; ?>
	</div>
<?php endif; ?>

.cols {
	font-size:0;
	vertical-align:top;
	display:inline-block;
	float:none;
}
.cols > div{
	font-size:14px;
	vertical-align:top;
	display:inline-block;
	float:none;
}
.cols.col-2 > *{
	width:50%;
}
.cols.col-3 > *{
	width:33.33%;
}
.cols.col-4 > *{
	width:25%;
}

* {
margin:0;
padding:0;
}

<?php if (!empty($this->intro_items)) : ?>
	<div class="cols col-<?php echo $this->columns; ?>">
	<?php foreach ($this->intro_items as $key => &$item) : ?>
		<article class="item">
		<?php
			$this->item = &$item;
			echo $this->loadTemplate('item');
		?>
		</article>
	<?php endforeach; ?>
	</div>
<?php endif; ?>

<?php if (!empty($this->intro_items)) : ?>
	<div class="cols col-<?php echo $this->columns; ?>">
	<?php foreach ($this->intro_items as $key => &$item) : ?>
		<div>
		<article class="item">
		<?php
			$this->item = &$item;
			echo $this->loadTemplate('item');
		?>
		</article>
		</div>
	<?php endforeach; ?>
	</div>
<?php endif; ?>

.cols > div{
	font-size:14px;
	vertical-align:top;
	display:inline-block;
	margin-right:30px;

.cols > *{
	margin:0 !important;
}

.cols > * > *{
	padding:20px;
}