How to arrange graphics using CSS two by two in ReactJS

Question

I use Leaflet map with recharts in ReactJS. At the moment when user clicks on the map marker PopUp will display with six charts one below the other. I want to style the graphics two under two in three lines.

How do I style the code with css ?

The code:

      {coords.map(({ lat, lng }, index) => (
          <Marker position={[lat, lng]} icon={customMarker} key={index}>
            <div className="popup">
            <Popup maxWidth="500" maxHeight="auto" >
              {index + 1} is for popup with lat: {lat} and lon {lng}
              <div className="chart">
              <br /><br />
              Температура °C
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="TA" fill='#f70000' stroke="#f56200" />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Скорост на вятъра
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey='WS' barSize={10} fill='#4287f5' />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Валеж
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey='RR' barSize={10} fill='#003cff' />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Сняг
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey='SR' barSize={10} fill='#5df5dc' />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Относителна влажност %
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Area type='monotone' dataKey='RH' fill='#8884d8' stroke='#f56200' />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Атмосферно налягане
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Area type='monotone' dataKey='APRES' fill='#8884d8' stroke='#f56200' />
              </ComposedChart>
              </div>
            </Popup>
            </div>
          </Marker>
        ))}
      </LeafletMap>

I want <ComposedChart/> to be wrapped and group two under two charts in three lines. I have imported CSS file in my code.

In the css file I paste this code:

.popup {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.chart {
  width: 40%;
}

But I cannot see the changes.

CodeSandBox

Answer 1

I'm a huge Flexbox fan. In your use case, this can be fixed (and be responsive) in just a couple of lines of css:

.popup {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.chart {
  width: 40%;
}