css - 使用示例作为指南渲染布局

Question

我有这个呈现菜单的组件:

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'

import Intro from './Intro'
import Houses from './Houses'
import PortfolioPage from './PortfolioPage'
import Cronology from './Cronology'

var data = require('./db.json');

class PortfolioMenu extends Component {
  constructor(props) {
    super(props)
    this.state = {
      portfolioClass: "",
      interiors: [],
      furnitures: [],
      studies: [],
      houses: []
    }
  }

  componentDidMount() {
    this.setState({
      interiors: data.interiors[0],
      furnitures: data.furnitures[0],
      studies: data.studies[0],
      houses: data.houses
    })
  }        
  render() {      
    return (
      <div>
        <Router>
          <div class="wrapper2">
            <div class="wrapper-portfolio">
              <Route exact path='/portfolio' render={() => <Intro />} />
              <Route exact path='/portfolio/casas' render={() => <Houses data={this.state.houses}/>} />
              <Route exact path='/portfolio/interiores' render={() => <PortfolioPage data={this.state.interiors}/>} />
              <Route exact path='/portfolio/moveis' render={() => <PortfolioPage data={this.state.furnitures}/>} />
              <Route exact path='/portfolio/estudos' render={() => <PortfolioPage data={this.state.studies}/>} />
              <Route exact path='/portfolio/cronologia' render={() => <Cronology />} />
            </div>
            <nav>
              <ul className={`portfolio-menu ${portfolioClass}`}>
                <li><NavLink activeClassName="active" isActive={this.isActive} exact to="/portfolio">• introdução</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/casas">• casas</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/interiores">• interiores</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/moveis">• móveis</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/estudos">• estudos</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/cronologia">• cronologia</NavLink></li>
              </ul>
            </nav>           
          </div>
        </Router>
      </div>
    )
  }
}


export default PortfolioMenu

我想做 <li>表现得像下面这个例子:

我该如何解决？我想以此示例中显示的这种确切方式进行渲染。执行 li 的元素分布。我想在第一行制作四个 block ，在第二行制作两个。

Answer 1

如果你必须使用纯 CSS(正如你在上面的评论中提到的)，你会想要使用 CSS grids .

如果您愿意使用第三方 JavaScript 库，我建议您查看 Material-UI .特别是他们的 Grid组件。

你的问题让你看起来像是前端开发的新手，所以我推荐第二种方法。 Material-UI 包括许多常用的组件，这些组件在多个浏览器中都经过了良好的测试。这是创建漂亮的布局和设计的好方法，不会让人头疼。