Core.css uses a .row to represent the rows in the container. If you append a class with the largest width to it, it represents a fixed-width row, otherwise it is a full-screen row. .col represents the column in the container, which divides the width of the container into 12 columns, which is what we often call a 12-grid system. .xs-12 represents a column width of 100%. Similarly, .xs-3 represents a column width of 25% because it requires 4 .xs-3 to reach 100% of the 12 grid. Others are analogously from .xs-1 to xs-12.
<div class="row"><!-- Row with no max-width -->
<div class="col xs-12">XS: 100%</div>
</div>
<div class="row sm"><!-- Row with a 768px max-width -->
<div class="col xs-6">XS: 50%</div>
<div class="col xs-6">XS: 50%</div>
</div>As the size of the screen changes, the elements of the content area will match the screen re-layout, which is what we call the adaptive effect. We can implement the adaptive effect by appending the class class to the .col column. Such as ultra small screen (xs), large screen (xl). The grid system will first match the mobile phone version of the small screen, so each .col needs a class such as: .xs-*, so if the big screen class is not set, it will use this .xs-*.
<div class="row xl">
<!-- Columns with a breakpoint-->
<div class="col xs-12 sm-6">XS: 100%, SM+: 50%</div>
<div class="col xs-12 sm-6">XS: 100%, SM+: 50%</div>
</div>
<div class="row">
<!-- Columns with two breakpoints -->
<div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
<div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
<div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
<div class="col xs-6 md-4 xl-3">XS/SM: 50%, MD/LG: 33%, XL+: 25%</div>
</div>If * in .xs-* is set to 0, such as .xs-0, then this column will be hidden, which means display: none.
<div class="row">
<!-- Hiding on only the smallest/largest screens -->
<div class="col xs-0 sm-6">Hidden only on XS screens</div>
<div class="col xs-6 xl-0">Hidden only on XL screens</div>
<!-- Showing on only the smallest/largest screens -->
<div class="col xs-4 sm-0">Visible only on XS screens</div>
<div class="col xs-0 xl-4">Visible only on XL screens</div>
<!-- Showing and hiding on every other screen size -->
<div class="col xs-5 sm-0 md-2 lg-0 xl-9">When would you need this?</div>
</div>If you want to set the maximum width of the container, such as the maximum width of 1280px, which is the large screen size, you can append the .lg helper class to the .row. The following is the corresponding size of the maximum width:
.xs {max-width: 32rem;} /* 512px (Extra-Small) */
.sm {max-width: 48rem;} /* 768px (Small) */
.md {max-width: 64rem;} /* 1024px (Medium) */
.lg {max-width: 80rem;} /* 1280px (Large) */
.xl {max-width: 96rem;} /* 1536px (Extra-Large) */Core.css also provides a simple basic css reset style, such as margin: 0, padding: 0 and box-sizing: border-box.
