応答区画内でオーバーフローラッピングに起因するすべての2番目のビジュアル行をインデントする方法

Question

現在、スタイルが適用されたコンポーネントと反応して応答性のある六角形グリッドで作業しています。現時点では、ウィンドウが変更されたときにすべてのdivを再配置するのは、単一のテーブル行（またはflexbox - 機能は同じです）です。しかし、すべての2番目の行にはmargin-left: 56px;が必要です。レンダリングされる六角形の数が絶えず変化するため、これは動的に/反応的に行う必要があります。

私はdivを他のdivにあふれさせようとしましたが、これはすばらしい解決策ですが、実装する方法がわかりません。また、ヘキサゴンの位置を追跡し、マージンを追加したり削除したりするときに、その位置を追跡しようとしましたが、どうやってそれを行うかはわかりません。

import React, { Component } from 'react'; 
import styled from 'styled-components'; 
import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <HexRow> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     <Hex /> 
     </HexRow> 
     </div> 
    ); 
    } 
} 

const HexRow = styled.div` 
    clear: left; 
    margin-bottom: 60px; 
    margin-left: 55px; 
` 

const Hex = styled.div` 
    &:before { 
    content: " "; 
    width: 0; height: 0; 
    border-bottom: 30px solid #6C6; 
    border-left: 52px solid transparent; 
    border-right: 52px solid transparent; 
    position: absolute; 
    top: -30px; 
    } 

    width: 104px; 
    height: 60px; 
    background-color: #6C6; 
    position: relative; 
    float: left; 
    margin-top: 30px; 
    margin-bottom: 9px; 
    margin-right: 10px; 

    &:after { 
    content: ""; 
    width: 0; 
    position: absolute; 
    bottom: -30px; 
    border-top: 30px solid #6C6; 
    border-left: 52px solid transparent; 
    border-right: 52px solid transparent; 
    } 
`; 

export default App; 

What happens now

What needs to happen

任意の助けやポインタが理解されます！むしろ自明下図のよう

Answer 1

あなたは...、:nth-child(even) CSSセレクタであなたが求めるプロパティがmargin-leftと呼ばれていること

注意（ないleft-marginを）これを行うことができます。

div p:nth-child(even) { 
 
    margin-left: 56px; 
 
}

<div> 
 
    <p>Hex</p> 
 
    <p>Hex</p> 
 
    <p>Hex</p> 
 
    <p>Hex</p> 
 
    <p>Hex</p> 
 
    <p>Hex</p> 
 
</div>