Duplicating Row of Elements with Contents

Beginners
1

i’m trying to duplicate a row with four columns (containing h3, p, img, img),
but the content of the row is not copied. How do I do this?
thank you.
larry.c

2

I think my answer is far too simple and it makes me think that I may not have fully understood the question?

3

Thank you for your reply. I suspect my problem is in the tree structure. When i do what you did, the columns are no longer spread horizontally in a single row. As in your video, the fourth one jumps to underneath the first column. I can get the contents of the columns to line up in a row using CSS grid, but then when i move them to their position in the grid, in the tree they jump out from under their respective div.col and appear at the higher div.container level. at this point, duplicating the row does nothing because they’re not under the row div. does that make sense? i can’t reconcile the rows of the css grid and the div.row of the tree. can you see what i’m doing wrong? thanks again for your help.

4

Can you please record a (less than 3mb) video of you doing the duplicate thing (and post it here) so we can check the situation?

5

Here’s the video:

  1. row of column div’s duplicated as in your video. but the four items don’t form a row.
    the photo of the trees is under the paragraph of text instead of to the right of the photo
    of the strawberries.

  2. undo the duplications. create a css grid and move each content item into a
    position in the grid. the corresponding items in the tree get moved out of the row.div.
    now the row looks correct.

  3. select the four items in the tree and copy. move to canvas under existing row and paste.
    the four items are duplicated in the tree but don’t appear on the canvas presumably because
    they are positioned over the original row.

that’s the problem. i can’t get a row of four cells to replicate downward to make a grid.
thanks again. —larry.c

6

@cubalarry It’s hard to tell without seeing all the HTML and CSS, but this looks like an issue with your HTML structure and CSS rules. Am I correct that you have the display:grid applied to the element? If so, that’s your problem. You are copying the child elements into the grid, but the grid container is still the same so everything is layering on top of one another. Try creating a div to hold all the elements you want to copy, apply your grid settings to it, then make copies of the whole thing.

7

I think you’ve found the problem. The CSS Grid was being applied to .
Applying a grid to just the container allows me to copy and move the rows up
and down on the page. Thank you so much.

1 Like