Hi Sagar,

Do you want those lightning cards to be aligned in the same manner as they are shown in 2nd screenshot.
I have made some changes in your code to do that - 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="iden" type="String"/>
    <div class="c-container">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
            <aura:iteration items="{!v.recordList}" var="con">
                <lightning:layoutItem size="4" padding="around-small">
                    <div class="custom-box">
                        <lightning:card title="{!con.Beer_Name__c}"  iconName="custom:custom56" >
                            Alcohol % : {!con.Alcohol__c}&nbsp;
                            Price : {!con.Price__c}
                            <div class="slds-col slds-size_4-of-8">
                                <img src="{!$Resource.BeerImage}"/>
                            </div>
                            <aura:set attribute="actions">
                                <lightning:button name="{!con.Id}"  label="View Details" onclick="{!c.detailspage}" variant="brand"/>
                            </aura:set>
                        </lightning:card>
                    </div>
                </lightning:layoutItem>
            </aura:iteration>
        </lightning:layout>
    </div>
    <div>
        <c:BeerDetails beerId="{!v.iden}"/>
    </div>
</aura:component>

Do let me know if this helps you.

Thanks