Большое спасибо за помощь Алексею Косоротову!
Сейчас подробно расскажу как добились диномического вывода!
[B]Разметка[/B]
[CODE]<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
IncludeTemplateLangFile(__FILE__);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?=LANGUAGE_ID?>" lang="<?=LANGUAGE_ID?>">
<head>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/jquery-1.4.2.min.js"></script>
<?$APPLICATION->ShowHead();?>
<div id="panel"><?$APPLICATION->ShowPanel();?></div>
<?$APPLICATION->ShowHead();?>
</head>
<body><div class="wor">#WORK_AREA#
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="http://"]') .attr({ target: "_blank" });
function smartColumns() {
$("ul.column").css({ 'width' : "100%"});
var colWrap = $("ul.column").width();
var colNum = Math.floor(colWrap / 200);
var colFixed = Math.floor(colWrap / colNum);
$("ul.column").css({ 'width' : colWrap});
$("ul.column li").css({ 'width' : colFixed});
}
smartColumns();
$(window).resize(function () {
smartColumns();
});
});
</script>
</div>
</div>
</body>
</html>[/CODE]
[B]Стили шаблона [/B]
[CODE]body{
background-color: #242325;
}
div.wor{
height:auto;
}
div.tovar{
width:auto;
margin-left: 10%;
margin-right: 10%;
background-color: #fff;
}
ul.column{
width: 100%;
padding: 0;
margin: 10px 0;
list-style: none;
}
ul.column li {
float: left;
width: 200px; /* ширина колонки по умолчанию */
padding: 0;
margin: 5px 0;
display: inline;
}
.block {
height: 200px;
font-size: 1em;
margin-right: 10px; /* отступ между колонками */
padding: 20px;
background: #fff;
}
.block h2 {
font-size: 1.8em;
}
.block786786786876786 img {
/* параметры для изображений с меняющимися размерами и бордюром */
width: 89%; /* убираем 1% от ширины, чтобы предотвратить баг в IE6 */
padding: 5%;
background:#fff;
margin: 0 auto;
display: block;
-ms-interpolation-mode: bicubic; /* предотвращение пикселизации изображений в IE 6/7 */
}[/CODE]
Переходим к сайту нажимаем режим правки Top элементов каталога по параметру (bitrix:store.catalog.top)/Редактировать шаблон компонента!Создаем новый!
В появившемся окне выделяем и удаляем все и вставляем вот этот код!
[CODE]<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="catalog-top">
<ul class="column">
<?
foreach($arResult["ROWS"] as $arItems):
?>
<div class="catalog-item-cards">
<?
foreach($arItems as $key => $arElement):
if ($key > 0):
?>
<?
endif;
if(is_array($arElement)):
$bPicture = is_array($arElement["PREVIEW_IMG"]);
?>
<li>
<div class="block">
<div class="catalog-item-card<?=$bPicture ? '' : ' no-picture-mode'?>">
<?
if ($bPicture):
?>
<div class="item-image">
<a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><img border="0" src="<?=$arElement["PREVIEW_IMG"]["SRC"]?>" width="<?=$arElement["PREVIEW_IMG"]["WIDTH"]?>" height="<?=$arElement["PREVIEW_IMG"]["HEIGHT"]?>" alt="<?=$arElement["NAME"]?>" title="<?=$arElement["NAME"]?>" id="catalog_list_image_<?=$arElement['ID']?>" /></a>
</div>
<?
endif;
?>
<div class="item-info">
<p class="item-title">
<a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><?=$arElement["NAME"]?></a>
</p>
<p class="item-desc">
<?
foreach($arElement["DISPLAY_PROPERTIES"] as $pid=>$arProperty):
?>
<small><?=$arProperty["NAME"]?>: <?
if(is_array($arProperty["DISPLAY_VALUE"]))
echo implode(" / ", $arProperty["DISPLAY_VALUE"]);
else
echo $arProperty["DISPLAY_VALUE"];
?></small><br />
<?
endforeach;
?>
<?=strip_tags($arElement["PREVIEW_TEXT"]);?>
<span class="item-desc-overlay"></span>
</p>
<?
if(count($arElement["PRICES"])>0):
foreach($arElement["PRICES"] as $code=>$arPrice):
if($arPrice["CAN_ACCESS"]):
?>
<p class="item-price">
<?
if($arPrice["DISCOUNT_VALUE"] < $arPrice["VALUE"]):
?>
<span><?=$arPrice["PRINT_DISCOUNT_VALUE"]?></span> <s><?=$arPrice["PRINT_VALUE"]?></s>
<?
else:
?>
<span><?=$arPrice["PRINT_VALUE"]?></span>
<?
endif;
?>
</p>
<?
endif;
endforeach;
endif;
?>
</div>
</div>
</div>
</li>
<?
else:
?>
<?
endif;
?>
<?
endforeach;
?>
<?
endforeach;
?>
</div>
</ul>
</div>
[/CODE]