Twine 2.1: Working with CSS Grids
CSS Grids are a powerful way to create "grids" through placing elements with respective to each other and a parent element. Using specific or percentage sizing, these elements can be highly responsive or matching exact numbers.
However, and here is the big caveat, this is still experimental CSS technology. Most browsers support it, but not all. Notably, Microsoft's Internet Explorer and Edge browsers have only partial support as of this writing.
<strong>Why would I want to use CSS grids?</strong>
While creating user interfaces can be done through positioning different elements on the page, grids allow elements to be positioned <em>in relation</em> to each other instead of the page itself.
Instead of using the <em>position</em> and a combination of <em>width</em>, or <em>height</em> CSS rules, grids are far easier and, unless set using specific sizes or with additional rules, will always be responsive to changes in screen sizes and across devices that support it.
[[Example 1]]{
<div class="example1-wrapper">
<div class="example1-one">One</div>
<div class="example1-two">Two</div>
<div class="example1-three">Three</div>
<div class="example1-four">Four</div>
</div>
}
[[Example 2]]{
<div class="example2-wrapper">
<div class="example2-box">1</div>
<div class="example2-box">2</div>
<div class="example2-box">3</div>
<div class="example2-box">4</div>
<div class="example2-box">5</div>
<div class="example2-box">6</div>
<div class="example2-box">7</div>
<div class="example2-box">8</div>
<div class="example2-box">9</div>
<div class="example2-box">10</div>
<div class="example2-box">11</div>
<div class="example2-box">12</div>
<div class="example2-box">13</div>
<div class="example2-box">14</div>
<div class="example2-box">15</div>
<div class="example2-box">16</div>
<div class="example2-box">17</div>
<div class="example2-box">18</div>
<div class="example2-box">19</div>
<div class="example2-box">20</div>
<div class="example2-box">21</div>
<div class="example2-box">22</div>
<div class="example2-box">23</div>
<div class="example2-box">24</div>
<div class="example2-box">25</div>
<div class="example2-box">26</div>
<div class="example2-box">27</div>
<div class="example2-box">28</div>
<div class="example2-box">29</div>
<div class="example2-box">30</div>
<div class="example2-box">31</div>
<div class="example2-box">32</div>
<div class="example2-box">33</div>
<div class="example2-box">34</div>
<div class="example2-box">35</div>
<div class="example2-box">36</div>
<div class="example2-box">37</div>
<div class="example2-box">38</div>
<div class="example2-box">39</div>
<div class="example2-box">40</div>
<div class="example2-box">41</div>
<div class="example2-box">42</div>
<div class="example2-box">43</div>
<div class="example2-box">44</div>
<div class="example2-box">45</div>
<div class="example2-box">46</div>
<div class="example2-box">47</div>
<div class="example2-box">48</div>
<div class="example2-box">49</div>
<div class="example2-box">50</div>
<div class="example2-box">51</div>
<div class="example2-box">52</div>
<div class="example2-box">53</div>
<div class="example2-box">54</div>
<div class="example2-box">55</div>
<div class="example2-box">56</div>
<div class="example2-box">57</div>
<div class="example2-box">58</div>
<div class="example2-box">59</div>
<div class="example2-box">60</div>
<div class="example2-box">61</div>
<div class="example2-box">62</div>
<div class="example2-box">63</div>
<div class="example2-box">64</div>
</div>
}
[[Example 3]]{
<div class="example3-wrapper">
<div class="example3-left-sidebar">Left Sidebar</div>
<div class="example3-content">Content</div>
<div class="example3-right-sidebar">Right Sidebar</div>
</div>
}