Как правильно верстаются такие рамки?
Можно поиграть с псевдоэлементами, которые будут перекрывать border'a (сами border'a можно сделать с помощью фона контейнера и margin между ячейками, например) и nth-of-type, т.к. белые области симметричны друг другу, но смещены отностительно пересечения ячеек и поэтому ширина псевдоэлементов для каждой n-ой ячейки будет своя..
Можно тупо задать position: relative контейнеру, рамки сверстать самым обычным образом подкрашивая border, а внутрь контейнера поместить пару элеметов c position: absolute и z-index, которые бы играли роль засветки на пересечениях рамок. Очевидно, что для более или менее динамической генерации ячеек этот способ не подходит.
Можно сделать комбинацию из двух этих вариантов.
В общем вопрос "как правильно" сильно зависит от вопроса - "а что это должно быть":)
Вам достаточно просто создать псевдоэлемент для каждого ВТОРОГО блока, создаете :after,:before в виде белых квадратиков и накладываете их на соседей (задаете им отрицательные отступы слева/справа/снизу). Вот и все. Ничего сложного в этом нет.