The parent of these three containers is using grid to lay them out. After 640px, open up the grid editor and add three more columns, and your containers line up automatically. That's all, believe it!
You can easily create effects like these by adjusting the state, applying your changes, and configuring your transitions. In this case, inside Out of View mode, I adjusted the Y-axis and lowered the opacity.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh risus, sagittis nec suscipit nec, mollis laoreet eros. Donec faucibus, libero id faucibus scelerisque, justo justo nullam sodales.
Four containers have been placed into one grid container. In the grid, each container is made to take up 1 fr. in width and 500px in height We used Flex controls for each container to keep the content centered. After that the links were a matter of designing along with adding some Hover transitions. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Meet moreRearranging the order of your containers is usually a laborous task, but with CSS Grid you can do this easily. Simply give each of these 4 containers its own ID, then head back to the parent container grid. Open up the grid editor and create 4 grid area names. To keep things simple, I named them image-1, content-1, image-2, content-2. Then assign these grid-areas to the container's ID, using the Apply Styles To dropdown. Now, if you want the container to be arraged a certain way, simply open up the grid editor and rename the are to the location you want it to be under.
Meet more