Organize the divs in a grid layout

I managed to get the current code working to showcase a grid of different recipes

<div class="mt-40">
    <div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
        <img src="data/2014121601/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
    </div>
    <div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
        <img src="data/2014121602/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
    </div>
    <div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
        <img src="data/2014121603/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
    </div>
    <div class="recipe-cont cont mt-15 rounded left mr-15 mb-15 ">
        <img src="data/2014121601/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
    </div>
    <div class="recipe-cont cont mt-15 rounded left mr-15 mb-15 ">
        <img src="data/2014121602/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
    </div>
    <div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
        <img src="data/2014121603/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
    </div>
    <div class="recipe-cont cont mt-15 rounded left mr-15 mb-15">
        <img src="data/2014121601/thumb.png" alt="thumbnail" class="rounded mt-5 ml-5">
    </div>
</div>

. 

.recipe-cont {
    width: 180px;
    height: 210px;
}

The displayed result resembles this:

My goal is to achieve the following design:

The issue I'm facing is due to having set margin-right: 15px.
I am looking for an easy way to add new recipes by simply inserting a new div. Removing the margin on the 5th div solves the problem temporarily, but it will become problematic with more recipes added, causing them to wrap onto a new line.

mr-15 = margin-right: 15px  
mb-15 = margin-bottom: 15px

Any assistance would be greatly appreciated!

htmlcss

Answer №1

If you want to style every 5th element using CSS, you can utilize the :nth-child() selector. Here's an example:

.mt-40:nth-child(5n+0) {
    margin-right: 0px;
}

For more information, check out this documentation: http://www.w3schools.com/cssref/sel_nth-child.asp

Make sure to place this declaration AFTER your existing .mr-15 { margin-right: 15px } rule for proper cascading.

Answer №3

Don't hesitate to utilize tables, even though some may disapprove of their use in website design and layout. When dealing with tabular data like the one shown here, embedding a table in the HTML code is always an option.

This method allows for easy insertion of new recipes by simply adding a new <td> or table data tag. I trust this information will assist you in reaching your goal.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on implementing Mail Merge Template files in PHP

I am new to mail merge and I'm not sure if it's even possible. I have created a template in mail merge, but I don't know how to use PHP to send emails to a list of clients like an RSS feed. Can someone confirm if this is feasible and provide ...

phphtmlmailmerge

Guide on creating connecting lines for bar charts within Kendo-UI

Recently embarking on the journey of learning Kendo-UI I have developed some bar charts and now I am looking to incorporate draw lines that connect the bar charts, similar to what is shown in the second figure. This is my current progress: This is my de ...

javascripthtmlkendo-ui

What is the best way to duplicate a complete row?

I am looking to create a form that includes an "Add Row" button. When this button is clicked, a new row should be generated, identical to the last row. The rows contain dropdown values, and I want the new row to display the same dropdown options as the p ...

javascriptjqueryhtmlxmlxslt

I am interested in setting the background for blogger headings H2, H3, and H4 to match the size

view the image hereI am using Blogger and have implemented CSS for H2, H3, and H4 tags with custom background and text size styles. However, I am facing an issue where I want the background size to automatically adjust according to the text size instead of ...

cssblogger

update html template with data using appscript htmlservice query

<?= data["message"] ?>. <br /> <br /> <!-- <?= $documentFolder = \".data["documentFolder"].&b ...

phphtmlgoogle-apps-script

Tips for troubleshooting CSS to eliminate scrollbars?

My website shares similar css with I am facing an issue where vertical and horizontal scrollbars are appearing in unwanted positions. Using Firefox, I am trying to troubleshoot the problem using the inspector. https://i.sstatic.net/K3pGL.png What steps ...

cssdebuggingfirefoxscrollbar

How can I display Yes/No instead of 1/0 in an HTML table?

I am getting a json file from the server with some values 0/1. These values are currently displayed in an HTML table, but I would like them to be displayed as Yes/No instead. How can I achieve this? Here is the code snippet I am using: $.getJSON('li ...

javascriptjqueryhtmljsonajax

developing a multimedia player using HTML5

I'm attempting to create a dynamic video "collage" that showcases videos with different aspect ratios in a flexible grid layout. Each row should have videos of the same height, while filling up the horizontal space within a container. With known widt ...

javascriptcsshtmlvideo

turning every input field's border to red if none of them were filled out at least once

I struggle with javascript and need some help. I have a form with multiple input fields, and I want to ensure that the user fills in at least one of them. I found code that triggers an alert message if the user does not fill in any fields, but I would pref ...

javascriptjqueryhtmlcss

Eliminate a selected option from one dropdown menu that corresponds to another dropdown menu

I have been scouring the internet for a while now, but I still haven't found an answer. On my website, I have three dropdown menus. These dropdowns are used for gathering user preferences so that users can control the output of results. I am wonderi ...

javascriptjqueryhtmlcssdrop-down-menu

Issues with the display of Bootstrap modal may occur when clicking an <a> tag

Attempting to open a modal by clicking on an <a> tag to display it centered vertically. However, upon clicking, the modal fails to appear at the center with the proper backdrop. In header.blade.php <div> <a class="header-text" href="#" ...

javascriptphphtmltwitter-bootstrapbootstrap-4

What causes Bootstrap to cut off text in buttons?

My button text is getting truncated for some unknown reason. Here is the HTML code: <input class="btn btn-default" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/> And this is how it appears: https://i.sstatic.net/Sr6Z0.png I hav ...

htmlcsstwitter-bootstrap

Why is it proving difficult to eliminate margin and padding from the top of the page?

Struggling to remove padding or margin from the top, I attempted to adjust the main container settings: margin-top:0px !important; padding-top:0px !important; Unfortunately, this did not have the desired effect. The code is too lengthy to include in thi ...

htmlcss

Border spacing driving Chrome wild

I've repeatedly tested this thoroughly. While it works perfectly in FF and IE9, Chrome seems to disregard the following CSS. border-collapse: separate !important; border-spacing: 5px 15px !important; For 2 seconds, it looks like this... AND THIS I ...

cssgoogle-chrome

What is the best way to leverage the $().button('toggle') method in order to manipulate a bootstrap 'radio-button list'?

<div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Active </label> <lab ...

javascripthtmlbootstrap-4

"Encountering issues with hyperlink tags in app engine - they are not functioning

Currently facing an unusual issue. I created a simple website and all I want to do is navigate from one page to another. It works perfectly fine locally, but when I deploy it on Google's App Engine, my links only take me back to the index page. Can&ap ...

htmlgoogle-app-engine

Best Practices for Developing GWT and CSS

How can we effectively develop an application with the involvement of an external CSS developer in designing the site's look and feel? Our goal is to seamlessly integrate CSS files created by the external developer into our site over multiple iterati ...

javacssgwt

Loading scripts in Ajax can be achieved in the following manner

One of my code snippets creates an unordered list dynamically based on the number of span elements containing information. The script looks like this: $(document).on('click','#addplaylisttolist',function(){ myPlaylist.pause(); ...

jqueryhtmlajaxsmartysharethis

My extensive AngularJS application is suffering from sluggish performance, attributed to an overwhelming number of files and

After developing an AngularJS application with multiple JavaScript files, I encountered a bottleneck. Chrome restricts the number of TCP connections to 6 at a time, causing additional requests to wait until the initial 6 are completed. This leads to signif ...

javascripthtmlangularjsgoogle-chrometcp

Steps for creating a horizontal card design

Looking to achieve a card style similar to this: http://prntscr.com/p6svjf How can I create this design to ensure it remains responsive? <div class="recent-work"> <img src="work/mercedes.png"> <h3>Modern website concept</h3&g ...

htmlcss