Wrap components in lightning

Question

I am trying to wrap components in a Salesforce Lightning tab. It seems like a fairly simple task. I want items (which are dynamically created lightning components) to be arranged in (for example) four columns on normal computer screens, and if someone shrinks the window (or loads the tab on mobile), the number of columns should be reduced, and all elements should rearrange themselves to adapt to the smaller number of columns.

I've looked at trying this with a grid, but but there doesn't seem to be an obvious way of changing the row and column of the dynamic elements.

EDIT: added my current code below.

Here is the way I am currently trying to do this. Here is the .cmp file:

<aura:component implements="force:appHostable">
    <lightning:button label="Get posts" onclick="{!c.handleComponent}"/>
    <div>
        {!v.body}
    </div>
</aura:component>

And here is the actual create components step in the Javascript controller code:

$A.createComponent(
"c:dsPostViewer",
{
    "itemTitle": post.title,
    "itemImageUrl": img,
    "itemContent": post.content,
    "float": "left",
    "margin": "20px 0"
},
function(newInp, status, errorMessage){
    if (status === "SUCCESS") {
        var body = component.get("v.body");
        body.push(newInp);
        component.set("v.body", body);
    }
    else if (status === "INCOMPLETE") {
        console.log("No response from server or client is offline.")
    }
        else if (status === "ERROR") {
            console.log("Error: " + errorMessage);
        }
    }
);

As you can see, I'm first trying to do it by floating the components left, which appears to do nothing.

Answer 1

If you use the lightning:layout and lightning:layoutItem components, you can specify a grid based on small, medium, and large devices:

<lightning:layout multipleRows="true">
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere />
  </lightning:layoutItem>
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere />
  </lightning:layoutItem>
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere />
  </lightning:layoutItem>
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere />
  </lightning:layoutItem>
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere />
  </lightning:layoutItem>
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere />
  </lightning:layoutItem>
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere />
  </lightning:layoutItem>
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere />
  </lightning:layoutItem>
</lightning:layout>

The grid system works on the idea of 12 units across, so 12 results in a single column, 6 results in two columns, and 3 results in four columns. Using this means you don't need any specific CSS of your own to make this happen.

Edit: Based on your edit, it looks like you'll want to create your lightning:layoutItem as well:

$A.createComponents(
[["c:dsPostViewer",
{
    "itemTitle": post.title,
    "itemImageUrl": img,
    "itemContent": post.content,
    "float": "left",
    "margin": "20px 0"
}],
["lightning:layoutItem", { smallDeviceSize: 12, mediumDeviceSize: 6, largeDeviceSize: 3 }]],

function(newInp, status, errorMessage){
  if(status === "SUCCESS") {
    newInp[1].set("v.body", newInp[0]);
    var body = component.get("v.body");
    body.push(newInp[1]);
    component.set("v.body", body);
  } ...

And for your component:

<lightning:layout multipleRows="true">
    {!v.body}
</lightning:layout>