Block grids are used to divide the content of the page equally: for example, to display four pictures in a row, you need to divide the width equally no matter what the screen is.
Can be used For another example, use paragraphs: 尝试一下 » You can set different sizes of screens to display different numbers of blocks by adding multiple grid block classes:
<ul>
Element plus
.small|medium|large-block-grid-num
Class to create a block mesh. num Used to specify that the average score is the quantity: 8.36.1. Example ¶
<ul class="small-block-grid-3">
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
</ul>
8.36.2. Example ¶
<ul class="small-block-grid-3">
<li><p>Just a Simple Example Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
<li><p>Just a Simple Example Text...</p></li>
</ul>
Different sizes of screens show different quantities. ¶
8.36.3. Example ¶
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
<li><img src="newyork.jpg" alt="New York"></li>
</ul>