Expression Engine & CSS

I’ve been learning using Expression Engine. One thing has me stumpted though.

I have a layout that uses a four column grid (see http://training.customstudio.co.uk/services). This uses three CSS classes: one for the column item, one for the last col开发者_如何学Goumn item, and one for the row to add the horizontal rule.

I’ve used the EE class switch to create the column and column last classes, (see http://training.customstudio.co.uk/portfolio) but I can’t figure out how to get EE to create the row class. I could do this manually, but want the page to be dynamic so if there are 16 items, there will be 4 rows with lines under each.

The code I’ve used is as follows:

<div class="content-main">
                        <h1>Portfolio</h1>
                            {exp:channel:entries channel="portfolio" status="open|Featured" orderby="title" sort="asc"}
                            <div class="{switch='col|col|col|col-last'}">
                                <h4><a href="{title_permalink='portfolio'}">{title}</a></h4>
                                <p>{project_description}</p>
                            </div><!-- /end #col -->
                            {/exp:channel:entries}
                    </div>
<!-- /end #content-main --> 

Any help will be very much appreciated!

Thanks in advance,

Tom Perkins

If you wrap your column divs in switch statements that contains a 'row' div every four iterations, you should get what you're looking for:

                <div class="content-main">
                    <h1>Portfolio</h1>
                        {exp:channel:entries channel="portfolio" status="open|Featured" orderby="title" sort="asc"}
                        {switch='<div class="row">|||'}
                        <div class="{switch='col|col|col|col-last'}">
                            <h4><a href="{title_permalink='portfolio'}">{title}</a></h4>
                            <p>{project_description}</p>
                        </div><!-- /end #col -->
                        {switch='|||</div>'}
                        {/exp:channel:entries}
                </div>

You can also accomplish this by using the modulus operator which can return the nth item. (https://ellislab.com/blog/entry/the-modulus-operator)

<div class="content-main">
    <h1>Portfolio</h1>
        {exp:channel:entries channel="portfolio" status="open|Featured" orderby="title" sort="asc"}
        {!-- Every 4th item add in a div with the class of row --}
        {if count == 1 OR count % 4 == 1}<div class="row">{/if}
        <div class="{switch='col|col|col|col-last'}">
            <h4><a href="{title_permalink='portfolio'}">{title}</a></h4>
            <p>{project_description}</p>
        </div><!-- /end #col -->
        {if count % 5 == 0 OR count == total_results}</div>{/if}
        {/exp:channel:entries}
</div>