Block Grids

优质

小牛编辑

129浏览

2023-12-01

描述 (Description)

块网格用于分割内容。块网格可以合并到主网格中。包括格式[size]-up-[n]类以更改不同屏幕或设备的所有列的大小。

例子 (Example)

以下示例演示了在基础中使用Block Grids -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
   </head>
   <body>
      <h2>Block Grids</h2>
      <div class = "row small-up-2 medium-up-3 large-up-4">
         <div class = "column">
            <img src = "/foundation/images/foundation-the-grid/birds.jpg" class = "thumbnail" alt = "Block Grids">
         </div>
         <div class = "column">
            <img src = "/foundation/images/foundation-the-grid/birds.jpg" class = "thumbnail" alt = "Block Grids">
         </div>
         <div class = "column">
            <img src = "/foundation/images/foundation-the-grid/birds.jpg" class = "thumbnail" alt = "Block Grids">
         </div>
         <div class = "column">
            <img src = "/foundation/images/foundation-the-grid/birds.jpg" class = "thumbnail" alt = "Block Grids">
         </div>
         <div class = "column">
            <img src = "/foundation/images/foundation-the-grid/birds.jpg" class = "thumbnail" alt = "Block Grids">
         </div>
      </div>
   </body>
</html>