Grid Layout

margin - the space "around" the element
padding - the space between the element and what is "inside"

            <div style={{ 
                display: 'grid',  
                gridTemplateColumns: 'auto auto auto', 
                backgroundColor: '#2196F3',  
                padding: '10px',  
            }}> 
              <div style={{ 
                  backgroundColor: '#2444F3',  
                  // border: 1px solid #2444F3',  
                  padding: '20px',  
                  fontSize: '30px',  
                  textAlign: 'center',  
              }}>1</div> 

              <div className="grid-item">2</div> 
              <div className="grid-item">3</div> 
              <div className="grid-item">4</div> 
              <div className="grid-item">5</div> 
              <div className="grid-item">6</div> 
              <div className="grid-item">7</div> 
              <div className="grid-item">8</div> 
              <div className="grid-item">9</div> 
            </div>