<commit_before>// Grid

.grid {
  display: flex; // Set parent container to flex
  flex-direction: row; // Flex items are stacked in a row from left-to-right
  flex-wrap: wrap; // Flex items are displayed in multiple rows if needed.

  &.no-padding {
    padding: 0;
  }

  &.no-margin {
    margin: 0;
  }
}

.grid__cell {
  box-sizing: border-box;
  flex: 1;
}

// Align items to the top of the container
.grid--top {
  align-self: flex-start;
}

// Align items to the middle of the container
.grid--middle {
  align-self: center;
}

// Align items to the bottom of the container
.grid--bottom {
  align-self: flex-end;
}

// Stretch the items to fit with distributed space
.grid--stretch {
  align-self: stretch;
}

// Align the items' baselines
.grid--baseline {
  align-self: baseline;
}

// Small screens from 320px to 480px
@include breakpoint(small) {
  float: left;
}

// Medium screens from 480px to 840px
@include breakpoint(medium) {
  float: left;
}

// Large screens from 840px and larger
@include breakpoint(large) {
  float: left;
}<commit_msg>finishing up grid layout and cells<commit_after>// Grid

// Block for grid layout
.grid {
  display: flex; // Set parent container to flex
  flex-direction: row; // Flex items are stacked in a row from left-to-right
  flex-wrap: wrap; // Flex items are displayed in multiple rows if needed.

  // Remove padding from outer container
  &.grid--no-space {
    padding: 0;

    // Remove margin from cells if no space is chosen
    .grid__cell {
      margin: 0;
    }
  }
}

// Grid cell element
.grid__cell {
  box-sizing: border-box;
  flex: 1;
}

// Align items to the top of the container
.grid--top {
  align-self: flex-start;
}

// Align items to the middle of the container
.grid--middle {
  align-self: center;
}

// Align items to the bottom of the container
.grid--bottom {
  align-self: flex-end;
}

// Stretch the items to fit with distributed space
.grid--stretch {
  align-self: stretch;
}

// Align the items' baselines
.grid--baseline {
  align-self: baseline;
}

// Small screens from 320px to 480px
@include breakpoint(small) {
  flex: 0 0 40%;
}

// Medium screens from 480px to 840px
@include breakpoint(medium) {
  flex: 0 0 40%;
}

// Large screens from 840px and larger
@include breakpoint(large) {
  flex: 0 0 40%;
}
{'fraction_non_alphanumeric': 0.11618798955613577, 'fraction_numerical': 0.020887728459530026, 'mean_word_length': 2.8316666666666666, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6191945', 'n_tokens_mistral': 821, 'n_tokens_neox': 759, 'n_words': 280}