CSS Grid появился в YUI3 еще когда пакет был на ранней стадии тестирования и перекочевал туда из второй версии YUI. Он открывал широкие перспективы перед программистами верстальщиками в организации структуры страницы. Можно было делить страницу или блок на колонки, сменой всего лишь одного класса менять их местами и много другое. Там применялась обычная техника позиционирования через float: left или float: right.

Однако через некоторое время после официального выпуска разработчики объявили этот компонент устаревшим и не рекомендовали его применять в реальных проектах на базе YUI3.

The current Grids system was designed with the needs of older browsers (including Firefox 2) in mind. With Firefox 2 coming off the A-Grade in the next GBS update (due in July), there are structural changes that we want to make in engineering a successor to the 2.x version of Grids.

Можно долго рассуждать о плюсах и минусах этого шага. Тем не менее, начиная с версии 3.2 этот компонент был заменен на абсолютно новый.

Теперь CSS Grid ориентирован только на работу в современных браузерах и основан на блоках с display: inline-block.

В место гибкости позиционирования колонок слева или справа (сейчас все колонки располагаются только слева направо согласно своему порядку в документе) мы получили возможность выравнивать их по вертикали с помощью vertical-align.

Как и прежде колонке необходимо явно задать ширину или можно воспользоваться заготовленными классами 24-х колончатой модульной сетки. Имя класса задает пропорции блока относительно родительского контейнера.

<div class="yui3-g">
    <div class="yui3-u-1-4">
        <div>колонка 25%</div>
    </div>
    <div class="yui3-u-1-2">
        <div>колонка 50%</div>
    </div>
    <div class="yui3-u-1-8">
        <div>колонка 12.5%</div>
    </div>
    <div class="yui3-u-1-8">
        <div>колонка 12.5%</div>
    </div>
</div>

По аналогии можно сделать свои классы, чтобы получилась сетка с требуемыми пропорциями или вообще задать фиксированную ширину колонок.

Интересным моментом этого компонента является то, как разработчики легко избавились от нежелательных зазоров в несколько пикселей между колонками. Так как элементы уже не блочные, то лишние пробелы в коде между блоками с классом yui3-u не игнорируются, а учитываются при отрисовке, как если бы это были пробелы между словами. От этих артефактов можно избавиться, удалив эти пробелы и пожертвовав читаемостью кода. Но такой пробел мог бы случайно возникнуть на любом этапе разработки. В Yahoo поступили гораздо хитрее. Все зазоры между колонками убираются с помощью правил letter-spacing или word-spacing, в зависимости от браузера.