Modern Full-Stack Development

 Another Quick Detour: CSS Grid
One of the first questions you must answer when developing a web app is how you’re 
going to lay out your components. There are lots of methods, each with their own pluses 
and minuses. But, given that we’re trying to use relatively modern techniques in this 
book, we’re going to go with the newest darling on the street: CSS Grid.
Virtually any web page layout can be described in terms of a grid (in fact, I’m not 
sure there’s any that can’t be). It’s all just columns and rows in the end, whether there’s 
only one of each (read: just a single block of content) or whether there are nested grids 
inside nested grids. All of it just rows and columns.
Let’s start with some simple markup (Listing 
9-1
).
Listing 9-1.  CSS Grid example markup

  
    
  
Chapter 9   Delivering the gooDs: MailBag, the Client

---

250
  
    

      

A

      

B

      

C

      

D

      

E

      

F

    

  

And, also as with MailBag, there isn’t much to see here because React will be 
constructing the UI, and for that, we need some code, and that leads us to…
Chapter 11   time for fun: BattleJong, the Client

---

313