Grid ułatwia zachowanie responsywności strony. Wszystkie nowoczesne strony korzystają z czegoś w tym rodzaju.
Jest to podział na wiersze i kolumny. Przykładowo dostarcza on klasę row i klasy col. Klasa row jest podzielona na 12, 16 albo zależnie od systemu n kolumn. Każda z klas kolumn posiada jeszcze dopisek dotyczący wielkości ekranu.
Żeby z niego skorzystać, tworzysz wiersz i wpisujesz w niego elementy określając dla jakiej rozdzielczości ile kolumn ma zająć dany element.
Przykład:
<div class="row"> <div class="col-m-8 col-s-12">content</div> <div class="col-m-8 col-s-12">content</div> </div>
Ten przykład stworzy nam dwa divy. W przypadku ekranu medium literka m w klasie (konkretny breakpoint jest ustalany przez system) mamy dwa divy wypełniające po połowie przestrzeni, obok siebie. Dla ekranu small, literka s, mamy dwa divy wypełniające cały wiersz, jeden pod drugim.
Spróbuj wykorzystać taki system przy tworzeniu strony, to wtedy zrozumiesz lepiej ideę grida. Taki system możesz napisać też sam.
Polecam zainteresować się też flexem w CSS.
Do moderatorów: Nie mogę na mobile usunąć formatowania pierwszej części odpowiedzi.